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■ M /elcome to the wonderful world of Web programming with JavaScript. 
WW If you've worked with HTML before but want to add more flexibility 
and punch to your pages, or even if you've never written a stick of code in 
your life but are eager to hop on the Infobahn-wagon, this book's for you. 

Although I don't assume that you know HTML, much of what you want to 
do with JavaScript is interact with objects created by using HTML — so you 
understand the examples in this book that much quicker if you have a good 
HTML reference handy. One to consider is HTML 4 For Dummies, 4th Edition, 
by Ed Tittel (Wiley Publishing, Inc.). 

I do my best to describe how JavaScript works by using real-world examples — 
and not a foo (bar) in sight. When explaining things in formal notation makes 
sense, I do that, but not without a recap in plain English. Most importantly, I 
include tons of sample programs that illustrate the kinds of things you may 
want to do in your own pages. 

Along with this book comes a companion CD-ROM. This CD-ROM contains all 
the sample code listings covered in the text along with many other interesting 
scripts, examples, and development tools. From experience, I can tell you that 
the best way to get familiar with JavaScript is to load the scripts and interact 
with them as you read through each chapter. If it's feasible for you, I suggest 
installing the contents of the CD right away, before you dig into the chapters. 
Then, when you come across a listing in the book, all you have to do is double- 
click on the corresponding HTML file you've already installed. Doing so helps 
reinforce your understanding of each JavaScript concept described in this 
book. For more information and instructions on installing the CD-ROM, see 
the About the CD appendix in the back of this book. 



System Requirements 

Here's what you need to get the most out of this book and the enclosed 
CD-ROM: 



V A computer with a CD-ROM drive and a modem 

A sound card (okay, this one's strictly optional, but it's a lot of fun!) 
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f Windows XT[sl] or Macintosh already installed with the following: 
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• A Pentium or faster processor, at least 16MB of RAM, and at least 
25MB of free hard drive space if you're running Windows XT 

A PowerPC or faster processor, at least 16MB of RAM, and at least 
10MB of free hard drive space for Macintosh users 



• A copy of either Netscape Navigator 7.0 or Microsoft Internet 
Explorer 6.0 (Chapter 1 tells you how to get a copy, if you haven't 
already) 



About This Book 

Think of this book as a good friend who started at the beginning, learned the 
ropes the hard way, and now wants to help you get up to speed. In this book, 
you can find everything from JavaScript basics and common pitfalls to answers 
to embarrassingly silly questions (and some really cool tricks, too), all of which 
I explain from a first-time JavaScript programmer's point of view. Although you 
don't find explanations of HTML in this book, you do find working examples on 
the companion CD complete with all the HTML you need to understand how 
JavaScript works. 



Some sample topics you can find in this book are: 

Creating interactive Web pages 
V 0 Validating user input with JavaScript 
f" Testing and debugging your JavaScript scripts 

Adapting your scripts for cross-browser issues 

V Integrating JavaScript with other technologies, such as Java applets, 
Netscape plug-ins, and ActiveX components 



Building intelligent Web pages with JavaScript can be overwhelming — if you 
let it. You can do so much with JavaScript! To keep the deluge to a minimum, 
this book concentrates on the practical considerations you need to get your 
interactive pages up and running in the least amount of time possible. 



Conventions Used in This Book 



The rules are pretty simple. All code appears in monospaced font, like this 
HTML line: 
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e you follow the examples' syntax exactly. Sometimes your scripts 
u add or delete spaces or type your keywords in a different case, 
but sometimes they don't — and you want to spend your time on more inter- 
esting bugs than those caused by spacing errors. (If you're like me, you copy 
and paste working code examples directly from the CD to cut down syntax 
errors even more!) 



Type anything you see in code font letter for letter. These items are gener- 
ally JavaScript keywords, and they need to be exact. Directives in itali cs 
are placeholders, and you can substitute other values for them. For example, 
in the following line of code, you can replace state and con f us ion and leave 
the equal sign out entirely, but you need to type va r the way that it's shown. 



var state = "confusion" 



Due to the margins of this book, sometimes code examples are wrapped 
from one line to another. You can copy the code exactly the way it appears; 
JavaScript doesn't have a line continuation character. JavaScript has only one 
place where you can't break a line and still have the code work — between 
two quotes. For example, the following line is invalid: 



var ful 1 Name = "George 
Washington" 



And, when you see ellipses in the code (like this: . . .) you know I've omitted 
a part of the script to help you focus on just the part I'm talking about. Or, I've 
placed more code (like the HTML around the JavaScript) on the CD to save 
paper. 

All the URLs listed in this book are accurate at the time of this writing. Because 
the Internet is such a dynamic medium, however, a few might be inaccessible 
by the time you get around to trying them. If so, try using a search engine, such 
as Yahoo! or Google, to help you find the slippery Web site you're looking for. 



What \lou're Not to Read 

Okay, you can read the text next to the Technical Stuff icons, but you don't 
have to understand what's going on! Technical Stuff icons point out in-depth 
information that explains why things work as they do (interesting if you're in 
the mood, but not necessary to get the most out of the JavaScript examples I 
present). 
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y's got to start somewhere, right? I'm starting out with the following 
assumptions about you, the reader: 

You know how to navigate through an application with a mouse and a 
keyboard. 

You want to build interactive Web pages for fun, for profit, or because 
building them is part of your job. 

You have, or can get, a working connection to the Internet. 

You have, or can get, a copy of Netscape Navigator 7.0 or Microsoft 
Internet Explorer 6.0. 



HoW This Book 1$ Organized 

This book contains five major parts. Each part contains several chapters, and 
each chapter contains several sections. You can read the book from start to 
finish if you like, or you can dive in whenever you need help on a particular 
topic. (If you're brand-new to JavaScript, however, skimming through Part I 
first sure couldn't hurt.) Here's a breakdown of what you can find in each of 
the five parts. 

Part 1: Building Killer Web 
Pages for Fun and Profit 

This part explains how to turn JavaScript from an abstract concept to some- 
thing happening on the screen in front of you. It takes you step by step through 
obtaining your choice of Netscape Navigator or Microsoft Internet Explorer, 
discovering how to access and modify the document object model, and writing 
and testing your first script. Part I also includes an overview of the JavaScript 
language itself. 




Part 11: Creating Dynamic Web Pages 

In this part, I demonstrate practical ways to create Web pages that appear 
differently to different users. By the time you finish Part II, you'll have seen 
sample code for such common applications as detecting your users' browsers 
on-the-fly, formatting and displaying times and dates, and storing information 
for repeat visitors by using cookies. 
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Part 111: Making \lour Site Easy for 
>pB0Cffa$P r5 10 Navigate and Use 



The chapters in Part III are devoted to helping you create Web pages that visi- 
tors can interact with easily and efficiently. You find out how to use JavaScript's 
event model and function declaration support to create hot buttons, clickable 
images, mouse rollovers, and intelligent (automatically validated) HTML forms. 



Part IV: Interacting With Users 

JavaScript is evolving by leaps and bounds, and Part IV keeps you up-to-date 
with the latest and greatest feats you can accomplish with JavaScript, including 
brand-new support for dynamic HTML and cascading style sheets. In this part 
you also find a double handful of the most popular JavaScript and DHTML 
effects, including pull-down menus, expandable site maps, and custom tooltips. 



Part V: The Part of Tens 

The concluding part pulls together tidbits from the rest of the book, organized 
in lists of ten. The categories include great JavaScript-related online resources, 
common mistakes, and debugging tips. 



Part VI: Appendixes 

At the back of the book you find a handful of indispensable references, includ- 
ing JavaScript reserved words, color values, document objects, and special 
characters. There's also a nifty how-to section that describes all the cool tools 
you find on the companion CD. 



Icons Used in This Book 

Ever get in one of those moods when you're reading along and get really 
excited, and you just wish there was a way to cut to the chase and absorb 
an entire chapter all at once? Well, if so, you're in luck! Not only is this book 
organized in nice, easily digestible chunks, with real-life figures and code 
examples, but there's an extra added value, too: eye-catching icons to give 
you a heads-up on the most useful tidbits, categorized so that you can tell 
at a glance what's coming up. 
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Take just a second to become familiar with the kind of information you can 
expect from each icon: 

^^h](^^^ flags some of the cool stuff you can find on the CD-ROM included 
in the back of this book. Because all the JavaScript source code listings are 
on the CD (plus lots more), you can load up the scripts for each section and 
follow along while you read if you want. 



AfcLSr^ This icon lets you know that some really nerdy technical information is coming 



your way. You can skip it if you want; reading through isn't absolutely neces- 
sary if you're after the bare-bones basics, but it does give you a little show-off 
material! 






Next to the tip icon you can find handy little tricks and techniques for getting 
the most bang out of your JavaScript buck. 



These little gems can help you figure things out, so pay attention. 




Before you jump in and start applying the information in any given section, 
check out the text next to these babies — chances are they'll save you a lot 
of time and hassle! 




4£/'jOj^<$ ) The browser icon alerts you to an important difference between the way 
£ / ^fiiM Netscape Navigator implements JavaScript and the way Internet Explorer 



implements JavaScript. 



Where to Go from Here 

So what are you waiting for? Pick a topic, any topic, and dive in. Or, if you're 
like me, begin at the beginning and read until you get so excited you have to 
put the book down and try stuff out for yourself. And remember: From now on, 
your life will be divided into two major time periods — before you mastered 
JavaScript and after you mastered JavaScript. Enjoy! 
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;ln this part . . . 
avaScript is one of the coolest Web tools around — 
and its use is spreading like wildfire. An extension to 
Hypertext Markup Language (HTML), JavaScript enables 
you to access and manipulate all the components that 
make up a Web page. With JavaScript, you can create cool 
graphic effects and build what are known as intelligent Web 
pages: pages that verify input, calculate it, and make pre- 
sentation decisions based on it. You can create all this, all 
on the client, without having to learn an industrial-strength 
language, such as C or C++! 

Part I introduces you to JavaScript and then walks you step 
by step through the process of creating your first script. 
Finally, this part acquaints you with basic JavaScript pro- 
gramming concepts, including everything you need to 
know to create sophisticated custom scripts, from syntax 
to the document object model. 



Chapter 1 

DropBook^, You^verWanted 

to Know about JavaScript 
(But Were Afraid to Ask!) 



In This Chapter 

Understanding a working definition of JavaScript 
Dispelling common JavaScript misconceptions 
Getting started with JavaScript tools 
Finding information online 



aybe you've surfed to a Web site that incorporates really cool features, 
such as 

Images that change when you move your mouse over them 

Slideshow animations 
W Input forms with pop-up messages that help you fill in fields correctly 
v 0 Customized messages that welcome repeat visitors 

By using JavaScript and the book you're reading right now you can create 
all these effects and many more! The Web page in Figure 1-1 shows you an 
example of the kinds of things that you can look forward to creating for your 
own site. 

A lot has changed since the previous edition of JavaScript For Dummies came 
out. Perhaps the biggest change is the evolution of DHTML, or dynamic HTML. 
DHTML refers to JavaScript combined with HTML and cascading style sheets, 
and it's a powerful combination you can use to create even more breathtak- 
ingly cool Web sites than ever before. 




Part I: Building Killer Web Pages for Fun and Profit 



£J J.izz Gtiitarisl Clay Moore Microsoft Internet Explorer 
File Edit View Favorites Tools 



p Books 



I 



Help 1,* 
O 3 iH & $>F a vo,te S Med* ^ 1 > * 2 V »• SS| ift lid 

//www.daymoore. com/index. html | v| ^° 



Figure 1-1: 

JavaScript 
lets you add 
interactive 
features to 
your Web 
site quickly 
and easily. 
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Along with this increased power comes increased complexity, unfortunately — 
but that's where this new, improved, better-tasting edition of JavaScript For 
Dummies comes in! Even if you're not a crackerjack programmer, you can use 
the techniques and sample scripts in this book to create interactive Web pages 
bursting with animated effects. 

Before you hit the JavaScript code slopes, though, you might want to take a 
minute to familiarize yourself with the basics that I cover in this chapter. Here 
I give you all the background that you need to get started using JavaScript as 
quickly as possible! 



What Is JavaScript! (Hint: It's 
Not the Same Ihinq asjatfa!) 



JavaScript is a scripting language you can use — in conjunction with HTML — to 
create interactive Web pages. A scripting language is a programming language 
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that's designed to give folks easy access to prebuilt components. In the case of 
JavaScript, those prebuilt components are the building blocks that make up a 
i^Jh^page (links, images, plug-ins, HTML form elements, browser configuration 



You don't need to know anything about HTML to put this book to good use; 
I explain all the HTML you need to know to create and use the JavaScript 
examples that you see in this book. If you're interested in discovering more 
about HTML, I suggest checking out a good book devoted to the subject. A 
good one to try is HTML 4 For Dummies, 4th Edition, by Ed Tittel and Natanya 
Pitts (Wiley Publishing, Inc.). 



JavaScript has a reputation of being easy to use because 

V The bulk of the document object model (the portion of the language 
that defines what kind of components, or objects, you can manipulate 
in JavaScript) is pretty straightforward. 

For example, if you want to trigger some kind of event when a person 
clicks a button, you access the on CI i ck event handler associated with 
the button object; if you want to trigger an event when an HTML form is 
submitted, you access the onSubmi t event handler associated with the 
form object. (You become familiar with the JavaScript object model in 
this book by examining and experimenting with working scripts. You can 
also check out Appendix C, which lists all the objects that make up the 
document object model.) 

When you load a cool Web page into your browser and wonder how 
the author created the effect in JavaScript, 99 times out of a 100 all you 
have to do to satisfy your curiosity is click to view the source code 
(choose ViewOPage Source in Navigator or choose ViewOSource in 
Internet Explorer). (Chapter 3 describes the . j s files that are responsi- 
ble for that 100th time.) This source code free-for-all, which is simply 
impossible with compiled programming languages such as Java, helps 
you decipher JavaScript programming by example. 

However, becoming proficient in JavaScript isn't exactly a no-brainer. One of 
the biggest factors contributing to the language's growing complexity is the fact 
that the two major JavaScript-supporting browsers on the market (Netscape 
Navigator and Microsoft Internet Explorer) implement JavaScript differently. 
Netscape supports JavaScript directly — hardly a surprise because Netscape 




It's easy! (Sort of) 
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was the one that came up with JavaScript in the first place! Internet Explorer, 
on the other hand, supports JavaScript indirectly by providing support for 
,s very own JavaScript-compatible language. And despite claims by 
cape and Microsoft that JavaScript and JScript, respectively, are 
open, standardized scripting languages," neither company offers explicit, 
comprehensive, all-in-one-place details describing all of the following: 



V Precisely which version of JavaScript (or JScript) is implemented in each 
of their browser releases. 

Precisely which programming features are included and which objects 
are accessible in each version of JavaScript and JScript. 

How each version of JavaScript compares to each version of JScript. 
(As you see in Chapter 4, JavaScript and JScript differ substantially.) 

The upshot is that creating cross-browser, JavaScript-enabled Web pages now 
falls somewhere around 6 on a difficulty scale of 1 to 10 (1 being the easiest 
technology in the world to master and 10 being the hardest). 

Fear not, however. Armed with an understanding of HTML and the tips and 
sample scripts that you find in this book, you can become a JavaScript jockey 
in no time flat! 



What's in a name? 



A long time ago, JavaScript was called 
LiveScript. In a classic "if you can't dazzle them 
with brilliance, baffle them with marketing" move, 
Netscape changed the name to take advantage 
of the burgeoning interest in Java (another pro- 
gramming language that Netscape partner Sun 
Microsystems was developing at the time). By 
all accounts, the strategy worked. Unfortunately, 
many newbies still mistake JavaScriptfor Java, 
and vice versa. 

Here's the scoop: Java is similar to JavaScript in 
thatthey're both object-based languages devel- 
oped for the Web. Without going into the nitty- 
gritty details of syntax, interpreters, variable 
typing, and just-in-time compilers, all you have to 
remember about the difference in usage between 



JavaScript and Java is this: On the gigantic client/ 
server application that is the Web, JavaScript 
lets you access Web clients (otherwise known 
as browsers), and Java lets you access Web 
servers. (Note: In some cases, you can also use 
Java for Web client development.) 

This difference might seem esoteric, but it can 
help you determine which language to use to 
create the Web site of your dreams. If what you 
want to accomplish can be achieved inside the 
confines of a Web client (in other words, by 
interacting with HTML, browser plug-ins, and 
Java applets), JavaScript is your best bet. But if 
you want to do something fancier — say, interact 
with a server-side database — you need to look 
into Java or some other server-side alternative. 
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eing relatively easy, JavaScript is also pretty speedy. Like most 
Jh^ languages, it's interpreted (as opposed to being compiled). When you 
program using a compiled language, such as C++, you must always reformat, 
or compile, your code file before you can run it. This interim step can take 
anywhere from a few seconds to several minutes or more. 

The beauty of an interpreted language like JavaScript, on the other hand, is 
that when you make changes to your code — in this case, to your JavaScript 
script — you can test those changes immediately; you don't have to compile 
the script file first. Skipping the compile step saves a great deal of time during 
the debugging stage of Web page development. 

Another great thing about using an interpreted language like JavaScript is 
that testing an interpreted script isn't an all-or-nothing proposition, the way 
it is with a compiled language. For example, if line 10 of a 20-line script con- 
tains a syntax error, the first half of your script may still run, and you may 
still get feedback immediately. The same error in a compiled program may 
prevent the program from running at all. 

The downside of an interpreted language is that testing is on the honor 
system. Because there's no compiler to nag you, you might be tempted to 
leave your testing to the last minute or — worse yet — skip it altogether. 
However, remember that whether the Web site you create is for business or 
pleasure, it's a reflection on you, and testing is essential if you want to look 
your very best to potential customers, associates, and friends. (A few years 
ago, visitors to your site might have overlooked a buggy script or two, but 
frankly, Web site standards are much higher these days.) Fortunately, 
Chapter 17 is chock-full of helpful debugging tips to help make testing your 
JavaScript code as painless as possible. 



Everybody's doing it! 
(Okay, almost everybody!) 

Two generally available Web browsers currently support JavaScript: Microsoft's 
Internet Explorer and Netscape/AOL's Navigator. (Beginning with version 4.0, 
Navigator became synonymous with Communicator, even though technically 
Netscape Communicator includes more components than just the Navigator 
Web browser.) Between them, these two browsers have virtually sewn up the 
browser market; almost everyone who surfs the Web is using one or the other — 
and thus has the ability to view and create JavaScript-enabled Web pages. 
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hink of JavaScript as an extension to HTML; an add-on, if you will. 

Here's how it works. HTML tags create objects; JavaScript lets you manipulate 
those objects. For example, you use the HTML <B0DY> and </B0DY> tags to 
create a Web page, or document. As shown in Table 1-1, after that document 
is created, you can interact with it by using JavaScript. For example, you can 
use a special JavaScript construct called the on Load event handler to trigger 
an action — play a little welcoming tune, perhaps — when the document is 
loaded onto a Web browser. (I cover event handlers in Chapter 13.) Examples 
of other HTML objects that you interact with using JavaScript include win- 
dows, text fields, images, and embedded Java applets. 



Table 1-1 


Creating and Working with Objects 




Object 


HTML Tag 






JavaScript 




Web page 


<B0DY> . . 




. </B0DY> 


document 




Image 


<IMG NAME= 


" my Image"> 


document .n 


y Image 


HTML form 


<F0RM name 
. . . </FC 


R 


"my Form"> 
M> 


document .n 


y Form 


Button 


<INPUT TYF 
NAME="myBi 


E 

t 


="button" 
ton"> 


document .n 
myButton 


y Form . 



To add JavaScript to a Web page, all you have to do is embed JavaScript code 
in an HTML file. Below the line in which you embed the JavaScript code, you 
can reference, or call, that JavaScript code in response to an event handler or 
an HTML link. 



You have two choices when it comes to embedding JavaScript code in an 
HTML file: 



V You can use the <SCRI PT> and </SCRI PT> tags to include JavaScript 
code directly into an HTML Hie. 

In the example below, a JavaScript function called processOrder( ) is 
defined at the top of the HTML file. Further down in the HTML file, the 
JavaScript function is associated with an event handler — specifically, 
the processOrder button's onCl i ck event handler. (In other words, the 
JavaScript code contained in the processOrder( ) function runs when a 
user clicks the processOrder button.) 
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<HTML> 
<HEAD> 

RIPT LANGUAGE-" Ja vaScri pt"> 
// JavaScript statements go here 
function processOrder( ) { 

// More JavaScript statements go here 

} 

</SCRIPT> 

</HEAD> 

<B0DY> 

< FORM NAME="myForm"> 

< I N PUT TYPE="button" NAME="processOrder" VALUE="Click to process your 
order" onCl ick="processOrder( ) ; "> 

</HTML> 

You can use the <SCRI PT> and </SCRI PT> tags to include a separate, 
external JavaScript file (a file containing only JavaScript statements 
and bearing a . j s extension) into an HTML file. 

In the example below, the JavaScript processOrderO function is 
defined in the myj Sf i 1 e . j s file. The function is triggered, or called, 
when the user clicks the Click Here to Process Your Order link. 



<HTML> 








<HEAD> 








<SCRIPT LANGUAGE-" JavaScript 




SRC="myJSfile.js"> 




</SCRIPT> 








</HEAD> 








<B0DY> 








<A HREF="javascript:processOrder();">Click here to process your 


order. </A> 


</B0DY> 








</HTML> 









0m* 




Keep in mind that most of the examples in these printed pages focus on 
the JavaScript portion of the code (naturally!). But I include the HTML that 
you need to create the examples on the CD-ROM, so you don't have sweat 
re-creating the Web pages from scratch! 




Because Web pages aren't made of HTML alone, however, JavaScript provides 
access to more than just HTML objects. JavaScript also provides access to 
browser- and platform-specific objects. Browser plug-ins (such as RealPlayer 
and Adobe Acrobat), the name and version of a particular viewer's browser, 
and the current date are all examples of non-HTML objects that you can work 
with by using JavaScript. 

Together, all the objects that make up a Web site — HTML objects, browser- 
and platform-related objects, and special objects built right into the JavaScript 
language — are known as the document object model (DOM). 
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to use Netscape Navigator 7.1 (or higher) or Microsoft Internet 
Explorer 6.0 (or higher) to use the latest JavaScript enhancements that I 
demonstrate in this book. 

Not all browsers are created equal: Internet Explorer's support for JavaScript 
differs significantly from Navigator's, and support for JavaScript varies from 
browser version to browser version. For details, check out Chapter 5. 

Although you can create and view JavaScript scripts with an old version of 
one of these browsers, I recommend that you install the most current version 
of Navigator or Internet Explorer. (What the heck — they're both free!) The 
latest versions of each product boast the very latest JavaScript features and 
bug fixes; they're also the versions that you see in the figures and examples 
in this book. 



You can use another browser, such as Opera or America Online (or even 
another Internet protocol, such as FTP) to download the latest version of 
Navigator or Internet Explorer and try it out. The section "What Do I Need to 
Get Started?" later in this chapter is devoted to the ins and outs of obtaining 
and installing a JavaScript-enabled browser. For now, suffice it to say that 

i>* You need Navigator or Internet Explorer to work with JavaScript, which 
means that you have to be running one of the client platforms that sup- 
ports these browsers. (The Macintosh operating system and Windows 
both support Navigator and Internet Explorer.) 

You need to be aware that people might use other, non-JavaScript-enabled 
browsers to view your Web pages — or they might use JavaScript-enabled 
browsers with JavaScript support turned off. Either way, you have no way 
to guarantee that everyone who visits your page can view your JavaScript 
handiwork. (Check out Chapter 5 for more information on this topic.) 



JavaScript and browser security 



In an era when computer viruses proliferate 
faster than crab grass, browser security is an 
important issue. You might be relieved to know 
that JavaScript poses no special security 
threats. Because JavaScript can't access any 
objects other than browser-contained objects 
(with the exception of cookies, which I discuss 



in Chapter 6), no one can use JavaScript to 
open up secretdial-up connections, wipe users' 
hard drives, or perform other malicious acts, 
even by accident. In other words, JavaScript is 
subject to the security controls built into 
JavaScript-supporting browsers. 



Chapter 1: All You Ever Wanted to Know about JavaScript 



What Can 1 Do With JavaScript That 
DropB&0!k8> With Web Languages? 

HTML. DHTML. XML. JavaScript. Java. Flash. When it comes to Web develop- 
ment, the sheer array of languages and development tools can be confusing — 
and you might be left wondering which language is best for which task. 

The fact is that each language was designed with a particular kind of task in 
mind, and JavaScript is no exception. Table 1-2 shows you the types of tasks 
that JavaScript is best (and least) suited to perform. JavaScript is best suited 
for client-side (browser-based) tasks. 



Table 1-2 Using JavaScript for the Right Task 




Task 




Is JavaScript 
Useful? 


Are JavaScript and 
CSS (DHTML) Useful? 


Provide users with helpful feedback 


Yes 


No 




Customize page appearance 




Yes 


Yes (more sophisticated 
than JavaScript alone) 


Examine or change HTML form data 


Yes 


No 




Create simple animations 




Yes 


Yes (more sophisticated 
than JavaScript alone) 


Create complex animations 




No 


No 




Perform server-side processing 




No 


No 





JavaScript performs its magic by working together with HTML and cascading 
style sheets (CSS). Here's how it works: HTML and CSS let you create static Web 
pages by using tag building blocks, or objects. JavaScript lets you inspect and 
manipulate the objects to punch up static pages with interactivity and simple 
animations. (In other words, to use JavaScript, you need to use HTML; to take 
advantage of dynamic HTML, or DHTML, features, you need to use both HTML 
and CSS.) 

By using JavaScript, you can make a Web site easy to navigate and even cus- 
tomize your page depending on who's viewing it, what browser the visitor is 
using to view it, and what time of day it is. You can even create simple (but 
effective) animated effects. 
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The most common way to perk up your pages with JavaScript is to make them 
easier to navigate. For example, you can use JavaScript to 

Create expandable site maps. 

*«* Add tooltips — helpful bits of text that appear when a user moves a mouse 
over a particular section of your Web site. 

v 0 Swap images when a user drags a mouse over a certain area of the screen. 
(This effect is called a mouse rollover, and it helps users determine at a 
glance which parts of your Web page are interactive, or clickable.) 

Inspect the data that your users enter and pop up helpful suggestions if 
they make an invalid entry. 

Display a thank-you message after a user submits a form. 

f Load content into multiple frames when a user clicks a button so that the 
user can view multiple chunks of related information at the same time. 

In addition to user-initiated events, such as clicking and dragging a mouse, 
JavaScript also recognizes automatic events — for example, loading a Web 
page onto a browser. (Check out Chapter 5 for details, including sample 
scripts that run in response to automatic events.) 



Customize the Way your Web 
site looks on-the-fty 

Everyone likes to feel special, and the folks who visit your Web site are no 
exception. By using JavaScript, you can tailor the way your pages look to 
different users based on criteria such as 

V The specific kinds and versions of browser that visitors use to view 
your page 

The current date or time 

Your users' behaviors the last time they visited your pages 
Your users' stated preferences 
Any other criteria you can imagine 



Chapter 1: All You Ever Wanted to Know about JavaScript 



pBoqfe 



Create cool, dynamic animated effects 



:s assume that you need Java to create animations for the Web, but 
t not so. Although JavaScript certainly won't be mistaken for the 
most efficient way to create high-density animations, you can use JavaScript 
with cascading style sheets (the combination is sometimes known as DHTML) 
to create a variety of really neat animated effects. As a matter of fact, using 
JavaScript is the easiest way to implement common effects, such as rollovers, 
as you can see in Chapter 8. 



What Do 1 Need to Get Started} 

I hope you're chomping at the bit to get started on your first JavaScript-enabled 
Web page! First things first, though . . . You have an idea of what JavaScript can 
do for you, and you might already have something specific in mind for your 
first attempt. Now's the time to dive into the preliminaries: what you need to 
get started and how to get what you need if you don't already have it. After 
you complete the setup, you can go on to the really fun stuff! 



Hardware 

For the purposes of this book, I assume that you're beginning your JavaScript 
adventure with a personal computer or a Mac. Your machine (or box, to use 
the vernacular) should be a Pentium PC or better (unless it's a Power Mac) 
and should have at least 32MB of RAM and at least 25MB free hard drive space. 
If none of this makes sense, try asking your local hardware guru; every orga- 
nization seems to have at least one guru. (I've found, through extensive trial 
and error, that most hardware gurus are fairly responsive to sugar-based snack 
foods.) 

You also need hardware installed that lets you connect to the Internet. This 
hardware usually consists of a modem and a phone line, although some folks 
opt for even faster options such as cable or DSL (digital subscriber line). 
Depending on your computer, you might have an internal modem installed — 
many come complete with a built-in modem. If not, you can buy a modem at 
your local computer discount store. The differentiating factor among modems 
is line speed: the faster the better. (Most computers these days come with a 
56.6 Kbps model preinstalled, but 28.8 works just fine.) If you don't already 
have a modem, consider buying the fastest modem in your price range; you'll 
be very glad you did when you try to look at spiffy Web pages with multiple 
graphics, each of which takes a loooong time to load (because graphics files 
are typically very large). 
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urposes of this book, I assume that you have a Mac OS 0 or later or 
al computer loaded with Windows 95, Windows NT, Windows 98, 
Windows 2000, Windows XP, or Linux. (Currently, only Netscape Navigator 
is available for use with Linux.) 

I also assume that you have some way to create text files. (Most operating 
systems come packaged with a variety of text editors and word processors, 
any of which work just fine for creating JavaScript scripts.) 

On the CD included with this book you can find some great text-editing utilities 
that are designed specifically for creating JavaScript files. 

JavaScript-specific software 

You need a Web browser. Navigator (Netscape Communication's commercial 
Web browser) and Microsoft's Internet Explorer are the only generally avail- 
able browsers that support JavaScript at the time of this writing. So, the first 
thing to do is to get a copy of Navigator or Internet Explorer.(The examples 
that you see in this book are demonstrated by using both Netscape Navigator 
and Internet Explorer running on Windows XP.) 

Most personal computers come with Internet Explorer already installed. To 
find out if this is the case for your particular computer, choose StartOAll 
Programs and look for Internet Explorer. 

Netscape Natflqator 

Netscape Navigator version 7.x bundles the Navigator browser with messaging, 
Web construction, and other Internet-related goodies. 

You can download a copy by visiting the following site (which offers step-by- 
step installation instructions): 

http: //channel s. net sea pe.com/ns/browsers/default.jsp 

Of course, I'm assuming that you already have a Web browser installed or 
that you have access to FTP. (FTP is short for file transfer protocol, which is 
an Internet application that enables you to download files from other people's 
machines.) 

Internet Explorer 

If you're a Microsoft buff, you might want to download a copy of Internet 
Explorer. Download it for free (or order your copy on CD-ROM for a nominal 
fee) from the following site, which offers easy-to-follow installation instructions: 



www.microsoft.com/windows/ie/default.htm 
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test Netscape Navigator and Microsoft Internet Explorer documen- 
d technical support, respectively, check out the following URLs: 

http://channels.netscape.com/ns/browsers/default.jsp 

www. mi crosoft . com/wi ndows/i e/defaul t .htm 

To view or download a copy of the Core JavaScript Reference, the documenta- 
tion from Netscape that explains JavaScript basics and language concepts, 
visit the following Web page: 



http://devedge.netscape.com/centre 


1 /javascri pt/ 




Microsoft's documentation for its JavaScript-i 
called JScript, can be found at 


:ompatible scripting 


! language, 


http ://msdn .mi crosoft . com/ 1 i bra ry/defaul t . asp?i 
us/script56/html/js56jsoriJScrif 


jrl=/l ibrary/en- 
it.asp 




or you can visit http 
scripting. 


: //msdn .mi crosoft .com and search for documents on 
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In This Chapter 

Designing your first JavaScript application 
► Creating an HTML file 
Creating and attaching a script 
Running the JavaScript application 



■ Mne of the best ways to figure out the particulars of a new scripting lan- 
guage is to dive right in and create a script — and that's just what this 
chapter shows you how to do! Actually, this chapter shows you how to do more 
than just create a script; it shows you how to create a JavaScript application. 
JavaScript isn't much use all by itself. It really needs to work in conjunction 
with HTML. So, a JavaScript application includes at least one script and at 
least one HTML file. 

This chapter covers every single, solitary aspect of JavaScript development 
from coming up with a useful idea to implementing, testing, and executing that 
idea. I don't assume that you have any previous knowledge at all, so even if 
you're new to JavaScript or the Web, you can follow along with the examples 
in this chapter. And because the example that I use demonstrates most of the 
common JavaScript constructs — including statements, variables, operators, 
functions, and event handlers — you can apply the strategies and code shown 
here to your very own script creations. 

So turn on your computer, roll up those sleeves, and get ready to have 
some fun! 
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Like great art, great software doesn't just happen. Creating either one requires 
you to do a bit of planning first, and then you have to use a tool — along with 
some kind of logical process — to translate your plan into something concrete. 

In this section, you become familiar with the basic tools that you need to create 
a JavaScript application: a simple text editor and a JavaScript-supporting Web 
browser. You also get a good look at the logical process (called the development 
cycle in programming circles) that you need to follow to create a JavaScript 
application. 



Ideas}! 1 qot a million of 'em! 

The first step to creating a knock-out JavaScript application is deciding 
exactly what you want your application to do. Provide some feedback to 
your visitors? Perform some calculations? Display requested information 
in a pop-up window? 

This book describes many of the things that you want to do with JavaScript — 
from validating user input to creating mouse rollovers. For more ideas, check 
out ScriptSearch. corn's JavaScript section at www .sen' ptsea rch . com/ 
JavaScri pt. 

When you have a clear idea in mind, take a few minutes to jot your thoughts 
down on a piece of paper. This phase — clarifying in writing exactly what you 
want your application to accomplish — has a long history of usefulness in 
professional software development. Formally dubbed the requirements phase, 
completing this step gives you the means to test your application at the end 
of the process. (Hey, you can't test something if you don't know exactly how 
it's supposed to work!) 

Here are the requirements for the first JavaScript proverb application that I 
describe in this section: 

I want to create a Web page that displays the current date and time. 

Notice that the requirements can be in your own words. You don't need to 
fill out a formal requirements document, or (gasp!) labor over a flowchart. 
A simple, concise description fills the bill nicely. 
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iu have your script requirements in hand, you're ready to hit the 
lopes! 






First off, you need to create a Web page. You do that by typing HTML code 
into a text editor and saving that code as a separate file on your computer's 
hard drive, which I show you how to do in this section. 

Because this book is all about JavaScript — not HTML — I don't go into 
great detail about the HTML language. Instead, I demonstrate only as 
much HTML as I need to describe all the wonderful things that you can 
do with JavaScript. If you need a good introduction to HTML, I suggest 
HTML 4 For Dummies, 4th Edition, by Ed Tittel and Natanya Pitts (Wiley 
Publishing, Inc.). 

Throughout this book, I use the Notepad text editor. Why? Because it 
comes free with the Windows operating system. (It's also easy to use.) But 
if you have another text-editing program installed on your machine that 
you'd rather use to create your scripts, by all means, use that program. 

The companion CD contains trial versions of a handful of cool text editors 
that are optimized for JavaScript, including HELIOS Software Solutions' 
TextPad, Bare Bones Software's BBEdit, Macromedia Dreamweaver, and 
Adobe GoLive. 

Just make sure that you use a text editor to create your scripts and HTML 
files rather than using a word processor. The difference is this: When 
you save a file by using a word processor application, such as Microsoft 
Word, the application adds special nontext characters to the saved file. 
Unfortunately, HTML and JavaScript interpreters — the bits of software 
inside Web browsers that process HTML and JavaScript code, respectively — 
can interpret only text; they can't interpret word-processing files containing 
special characters. 

One exception exists to the rule about not using word processors to create 
HTML or JavaScript files. Some word processors allow you to save files in 
HTML or plain text format. To save a file in plain text format by using Microsoft 
Windows, for example, you simply choose FileOSave As and select Text Only 
from the Save As Type drop-down list. If your word processor offers the ability 
to save files in HTML or plain text format, you can use that word processor to 
create HTML and script files. Otherwise, you need to use a text editor, such 
as Notepad. 
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ose StartOAU Programs 1 ^ AccessoriesONotepad to pull up the 
pad editing window. 



When the Notepad editing window appears, type in your HTML and 
JavaScript code. (See Figure 2-1.) 

3. When you're finished typing, save the file by choosing FileOSave. 

If you're creating an HTML file containing embedded JavaScript 
statements — such as the one that I describe in this chapter — 
make sure that the name you give your file contains the . htm or 
.html extension. 



Figure 2-1: 

The date- 
and-time- 
stamp 
script as it 
appears in 
the Notepad 
editing 
window. 



Iist0201.htm - Notepad 

File Edit Format View Help 

j<HTML> 
<HEAD> 

<TiTLE>Displaying the current date and time (basic exampl e)</TITLE> 

<SCRIPT LANGUAGE- "Javascript" TYPE-"text/javascript"> 

<! — Hide from browsers that do not support Javascript 

// Capture the current date and time from the system clock 
var todays_date = new DateO; 

// Display the current date and time on the web page 
document . wr i t el n (t odays_dat e) ; 

// — > Finish hiding 

</SCRIPT> 
- /HEAD::. 
<BODY> 

<P>This is the HTML text for my first JavaScript appl i cati on. </P> 

</BODY> 

</HEAD> 

</HTML> 
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The script that I demonstrate in this chapter is embedded in an HTML file, 
which is the most common way to implement JavaScript scripts. However, 
you can also implement a script as a separate file by using the . j s extension, 
and then reference that JavaScript file explicitly from an HTML file. I cover 
this technique in Chapter 1. 



Listing 2-1 shows you what the HTML code for the date-and-time-stamp appli- 
cation looks like in the Notepad editing window. 

To see how the code in Listing 2-1 behaves in a Web browser, load the file 
list0201.htm — which you find on the companion CD — into Netscape 
Navigator or Internet Explorer. 
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Listing 2-1 : The HTML Code for the Date-and-Time-Stamp Application 



1-^ <|TML> 
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isplaying the current date and time (basic example)</TITLE> 

</HEAD> 
<B0DY> 

<P>This is the HTML text for my first JavaScript application. </P> 

</B0DY> 

</HTML> 



The code in Listing 2-1 displays the following: 

f* A title: The title text, Di spl ay i ng the current date and time 
(basic example), appears in the title bar of the document window. 

A bit of text: The Thi s is the HTML text for my first 
JavaScri pt appl i cati on text appears in the body of the Web page. 

Figure 2-2 shows how the HTML code in Listing 2-1 appears in Netscape 7.1. 



Figure 2-2: 
The HTML 

portion of 
the date- 
and-time- 
stamp 
application 
as it appears 
in Navigator. 



•tU' Disphiymij the anient <l<ite <in<l time Ih.isk: ■ Netscape 
File Edit View Go Bookmarks Tools Whitlow Help 



V tile:/ffC:/em/write/jsfd4e/code/Chapter%202/list0201 htm 
J / B, QMail ^ AIM -fi Home Si Radio H Netscape <\ Search t3Bookmarks 



I 



O Seaich 



This is the HTML text for my first JavaScript application. 



itMl g QJ Q Done 



Q 506331 Ch02_f.d... \ C:\Documents an... 



Displayingtheeur.., 



/,. 

g*TextPad-[C^em\... [^ffjg® 2:43PM 
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Some JavaScript programmers set the LAN- 
GUAGE attribute of the <SCRI PT> tag equal to a 
value of JavaScri ptl . 1, JavaScri ptl . 2, 
orJavaScriptl.3(as opposed to plain old 
JavaScri pt) if their script takes advantage of 
version-specific JavaScript code. For example, 
you can use any of the following three options: 

<SCRI PT LANGUAGE-" JavaScri pt"> 
. . . (JavaScript code version 1.0 and 

up) 

</SCRIPT> 

<SCRI PT LANGUAGE-" JavaScri ptl .2") 
. . . (JavaScript code version 1.2 or 

up) 

</SCRIPT> 

<SCRI PT LANGUAGE-" JavaScri ptl. 3"> 
. . . (JavaScript code version 1.3 or 

up) 

</SCRIPT> 

The trouble with that approach is that keeping 
track of JavaScript support in the many different 
versions of Navigator and Internet Explorer is 
enough to keep a full-time accountant busy! Take 
a look at the following and you see what I mean: 

v 0 Navigator 2.0 and Internet Explorer3.0 sup- 
port JavaScript 1.0. 

v 0 Navigator 3.0xand Internet Explorer3.0xand 
4.0xsupport JavaScript 1.1. 



crunching 

*>* Navigator 4.0 through 4.05 supports Java- 
Script 1.2. 

V Navigator 4.06 through 4.5 supports Java- 
Script 1.3. 

V Internet Explorer 5.x supports JScript 5.x 
(which is compatible with JavaScript 1.3, 
more or less). 

V Navigator 6.0xand 7.1 and Internet Explorer 6 
support JavaScript 1.5. 

Whew! Even if you do manage to identify which 
ve rsio n of J avaScri pt o r J Sc ript fi rst i ntrod uc ed 
supportfor which JavaScript constructs you're 
using, specifying a value of JavaScri pt 1.3 
(rather than JavaScri ptjfor the LANGUAGE 
attribute doesn't provide any additional Java- 
Script support. It simply prevents browsers that 
don't support JavaScript version 1.3 from trying 
to interpret those JavaScript statements sand- 
wiched between the <SCRIPT LANGUAGE= 
"JavaScri ptl .3" > and </SCRIPT>tags. 

My advice? Stick with LANGUAGE=" Java 
Script", use cutting-edge JavaScript con- 
structs sparingly, and test your scripts in as 
many different browsers (and versions of 
browsers) as you possibly can. 



Even though the Web page in Figure 2-2 looks nice, it's only half done. No date 
or time stamp appears on the page. 

That's where JavaScript comes in! You need a script to capture the current date 
and time and display it on the page. You find out all you need to know to create 
a script to do just that — as well as attach that script to an HTML file — in the 
next two sections. 
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Part 11: Creating your script 
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u have a working HTML file, such as the one shown previously in 
" you can begin creating your script. 



For the date-and-time-stamp application that I describe in "Ideas?! I got a mil- 
lion of 'em!" earlier in this chapter, you need to create a script that 



I 



V Captures the current date and time. 

V Displays the current date and time on the Web page. 



The JavaScript code required to do all this, as shown in Listing 2-2, is simpler 
than you might think. In Chapter 3, you get familiar with each and every line 
of JavaScript code in detail, including comments, variables, and methods. For 
now, just take a gander at Listing 2-2. 



Listing 2-2: JavaScript Code for the Date-and-Time-Stamp Application 



// Capture the current date and time from the 


>ystem clock 




var todays_date = new DateO; 






// Display the current date and time on the We 


) page 




document. writeln(todays_date) ; 







As you glance over Listing 2-2, notice that 



Lines that begin with / / are JavaScript comments. The JavaScript 
interpreter doesn't attempt to execute comments. Instead, comments 
serve to describe in human terms what you, the JavaScript programmer, 
want the JavaScript code to accomplish. In Listing 2-2, you see two com- 
ment lines. (For more about JavaScript comments, flip to Chapter 3.) 

The first JavaScript statement captures the current date and time by 
creating a new instance of the built-in Date object and assigning the 
value of that instance to a variable called todays_date. 

var todays_date = new DateO; 

Note: You can find out more about how variables work by turning to Chap- 
ter 3. For the nitty-gritty on the built-in Date object, check out Chapter 4. 

The second JavaScript statement uses the wri tel n ( ) method of the 
document object to write the contents of the todays_date variable to 
the body of the Web page. 

document. writeln(todays_date) ; 

In case you're interested, Chapter 4 describes the document object and 
the wri tel n ( ) method in detail. 
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Part 111: Putting it all together by 
pBOCjNS^^ a scrip* t0 m HTML file 



Together, the HTML code that you see in Listing 2-1 and the JavaScript code 
you see in Listing 2-2 comprise the date-and-time-stamp application. Only one 
step remains: combining the two into a single HTML file. (This step is often 
referred to as attaching a script to an HTML file.) 



Listing 2-3 shows you how to do just that. 

To experiment with the code in Listing 2-3 on your own computer, just 
load the list0203.htm file (located on the companion CD) into your Web 
browser. 



Listing 2-3: The Whole Enchilada: The HTML and JavaScript Code 
for the Date-and-Time-Stamp Application 

<HTML> 
<HEAD> 

<TITLE>Displaying the current date and time (basic exampl e)</TITLE> 
<SCRIPT LANGUAGE-" JavaScript" TYPE="text/javascript"> 
<!-- Hide from browsers that do not support JavaScript 

// Capture the current date and time from the system clock 
var todays_date = new DateO; 

// Display the current date and time on the Web page 
document. writeln(todays_date) ; 

// --> Finish hiding 
</SCRIPT> 

</HEAD> 
<B0DY> 

<P>This is the HTML text for my first JavaScript application. </P> 

</B0DY> 

</HTML> 



The code that you see in Listing 2-3 combines the HTML code shown in 
Listing 2-1 with the JavaScript code shown in Listing 2-2 — along with 
four lines of additional code. It's this additional code, shown in bold, that 
attaches the JavaScript script to the HTML file. 

As you scan through Listing 2-3, notice the following: 
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f The JavaScript code is shoehorned into the HTML file by using the 
HTML <SCRIPT> and </SCRIPT> tags. 

avaScript code must appear between beginning <SCRI PT> and ending 
RI PT> tags. You can include more than one script per HTML file as 
long as you surround each script with the <SCRI PT> and </SCRI PT> tags. 
Because more than one scripting language exists, the LANGUAGE and TYPE 
variables specify JavaScript as the scripting language for this particular 
script. 

The JavaScript code is placed in the header section of the HTML file 
(between the HTML <HEAD> and </HEAD> tags). 

You can include multiple <SCRI PT> and < / SC RI PT> tags in different 
places in the HTML file. For example, you can include the < SC RI PT> 
and < / SC RI PT> tags in the body section of an HTML file between the 
beginning and ending <B0DY> and </B0DY> tags. However, because the 
browser executes JavaScript code as it encounters that code, from top 
to bottom, the fact that you include your script at the very top of an 
HTML file (in the header section, as shown in Listing 2-3) ensures that 
the JavaScript code is available for execution as soon as the Web page 
is loaded. 

i>* HTML comments hide the script from browsers that don't support 
JavaScript. 

Browsers that don't support JavaScript ignore everything between these 
two lines: 

<!-- Hide from browsers that do not support JavaScript 
// --> Finish hiding 



Surrounding your JavaScript statements with these two hiding symbols 
prevents non-JavaScript-enabled browsers from displaying your JavaScript 
statements as text. 



Make sure that you put the beginning and ending hiding symbols (< ! - - and 
/ / - - >, respectively) on their own separate lines. Placing either symbol on 
the same line as a JavaScript statement could cause a non-JavaScript-enabled 
browser to display your JavaScript code, just as though the hiding symbols 
didn't exist. 



Following each pair of<SCRIPT>and</SCRIPT> tags with the HTML 
<N0SCRIPT> and </N0SCRIPT> tags allows you to control more precisely 
what folks using non-JavaScript-enabled browsers see when they visit your 
Web page. For example, the following code displays a message telling users 
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that they need to use a JavaScript-enabled Web browser to get the most from 
your Web page: 



> 

<N0SCRI PT> 

You must be running a JavaScript-enabled Web browser, such as the latest version 
of Microsoft Internet Explorer or Netscape Navigator, to get the 
most from this Web page. 

</N0SCRIPT> 



Testing \lour Script 

When you have an HTML file that contains embedded JavaScript code, as 
shown previously in Listing 2-3, you're ready to test your JavaScript applica- 
tion! (This is the really fun part.) 

To test a JavaScript application, all you need to do is load the JavaScript- 
containing HTML file into a JavaScript-supporting Web browser. Figure 2-3 
shows you how the code in Listing 2-3 looks when it's loaded into the 
Netscape 7.1 browser. 



Figure 2-3: 

The date- 
and-time- 
stamp appl- 
ication as it 
appears in 
Netscape 
7.1. 



Displaying the current date and time (basic ex<ini|)le| - Netscape 
File Edit View Go Bookmaiks Tools Window Help 



file:///C:/em/write/jsfd4e/code/Chapter%202/list0203 htm 
J / B, QMail J| AIM -K Home S"D Radio H Netscape <\ Search QBookmarks 



| Q. Search | ^| 



Thu Jun 10 2004 14:44:30 GMT-0500 (Central Standard Time) 
This is the HTML text for my first JavaScript application 



] 506331 Ch02_f.d... ' C:\Docuinenls an... 



iN Displaying the cur.., 



-A- d" 1 

g , TextPad-[C:\emi... J^£© 2:4tPM 
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Note: You can find a fancier version of the date-and-time-stamp application in 
Chapter 3. 



jlyj^^^d the code in Listing 2-3 in your browser and see a Web page similar 
to the one shown in Figure 2-3, congratulations! You've just successfully tested 
your very first JavaScript script. 

If you don't see a Web page similar to the one in Figure 2-3, however, don't 
despair. Chances are good that the problem is due to one of the following 
situations: 

& The correct HTML file isn't loaded. If you created your HTML file from 
scratch, you might have inadvertently mistyped a statement or otherwise 
introduced a bug. No problem; you can fix the bug later. (Chapter 17 is 
packed with tips for debugging your scripts.) For now, try loading the 
bug-free 1 i st0203 . htm file from the companion CD. 

i>* You're not using a JavaScript-enabled browser. Make sure that you're 
using Microsoft Internet Explorer 6.0 (or higher) or Netscape Navigator 7.1 
(or higher). 

JavaScript support is turned off in your browser. Netscape Navigator 
and Microsoft Internet Explorer both provide ways to turn off JavaScript 
support. When you turn off JavaScript support in your browser and 
then load a JavaScript-containing Web page, your browser ignores all 
the JavaScript code. It's as if it didn't exist! 

To make sure that JavaScript support is turned on, do the following: 

If you're using Netscape Navigator 7.x, choose EditOPreferences and 
double-click the Advanced menu option to display the Scripts & Plugins 
menu selection. Click the Scripts & Plugins men selection and make sure 
that the Enable JavaScript for Navigator check box is selected. 

f" If you're using Internet Explorer 6.x, choose ToolsOInternet OptionsO 
Security. Then select the Internet Web Content Zone, click the Custom 
Level button, and scroll down until you find the Active Scripting category. 
Finally, ensure that the Enable option (right under the Active Scripting 
option) is selected. 
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Chapter 3 

P JavaScript Language Basics 



In This Chapter 

Taking a look at JavaScript syntax 

Putting together JavaScript expressions and statements 

Practicing JavaScript language basics with the browser-detection script 

Understanding conditionals 

Exploring functions 



ZM lthough JavaScript is an awfully powerful language, the way you use it 
r • can be boiled down to just two major concepts: syntax and the JavaScript 
object model (also called the document object model). 

Syntax refers to the rules that you must follow to write JavaScript code. Not 
many syntax rules exist, but you do need to understand them — just as you 
need to understand and follow the rules of English syntax to write a sentence 
that English-speaking folks can understand. 

The document object model (DOM) refers to the Web page components, or 
objects, that you can access and manipulate by using JavaScript. In the same 
way that you need to have a vocabulary of English words before you can write 
a story in English, you need to be somewhat familiar with the DOM before you 
can write your own JavaScript scripts. (I devote Chapter 4 to the DOM.) This 
chapter arms you with the syntax knowledge that you need to write your own 
scripts! 



JavaScript Syntax 

The rules and regulations that govern how humans can communicate with 
the JavaScript interpreter — that piece of the Web browser that understands 
and executes JavaScript code — is called the JavaScript syntax. Although you 
might feel a little overwhelmed (especially at first!) with all the technicalities 
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of JavaScript syntax, you can focus on just these few things, which are the 
building blocks of your code: 



ments: Comments are human-readable (as opposed to JavaScript- 
interpreter-readable) descriptions you can add to your script to make 
your script easier to understand and maintain. 

Conditionals: Conditionals are logical constructs that you can add to 

your script to decide whether a particular condition is true or false at 
runtime. The most basic conditional is i f -el se. 

f* Functions: Functions are named groups of statements that you define 
once, and then reuse to your heart's content. 

Loops: Loops are specialized forms of conditionals. You can add a loop 
to your script that checks a particular condition multiple times, executing 
whatever JavaScript code you like, until that condition becomes true or 
false. Common examples of loops include the for, whi 1 e, and dowhi 1 e 
loops. 

f" Operators: Operators are the JavaScript answer to conjunctions. Opera- 
tors include the commas, periods, and other symbols that you use to 
compare and assign values to variables. 

*<" Variables: Variables are named placeholders that represent the bits of 
data that you work with in your scripts. 

I discuss each of these syntactical building blocks in the following sections. 



Don't keep your comments to yourself 

The JavaScript interpreter ignores comments. Comments do have value, 
though; they're very useful for explaining things to human readers of your 
script. (Include yourself in this category, by the way — after you finish a script 
and put it aside for a few months, you might appreciate those comments!) 

You can write JavaScript comments in two different ways. Either type of com- 
ment can appear anywhere in your script and as many times as you like. 

The first type of comment is a single-line comment. It begins with two forward 
slashes, and it's good for only one line. Here's an example of a single-line 
comment. 



// Single-line comments don't require an ending slash. 
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The second type of comment is a multiple-line comment. Because it spans 
multiple lines, you have to tell it where to start (by using a forward slash 
by an asterisk) and where to end (by using an asterisk and then a 
lash). For example: 



/* This comment can span multiple lines. Always remember 
to close it, though; if you forget, you'll get weird errors 
when you try to display your script. */ 

Don't overlap or nest multiline comments in your JavaScript code. If you do, 
the JavaScript interpreter generates an error. 



^NLSTfyc Remember that JavaScript scripts are the lines of code that come between 
y^S^X the<SCRIPT>and</SCRIPT> tags in an HTML file. You can't use HTML 
comment characters (< ! - - to begin a comment line and - - > to end it) to 
create JavaScript comments, and you can't use JavaScript comment charac- 
ters (/ / and /* */) to create HTML comments. 



Mint conditionals 

JavaScript offers several conditional expressions that you can use to test the 
value of a condition at runtime. The two most popular conditionals are the 
i f -el se and switch statements. 



if-etse 

The i f -el se conditional expression is one of the most powerful constructs 
in JavaScript. 

You use i f - e 1 s e to test a condition: 



*** If the condition is true, the JavaScript interpreter executes all the state- 
ments that follow the i f clause. 

I If the condition is false, the JavaScript interpreter executes all the state- 
ments that follow the else clause (if the else clause exists). 

Here's the generic description of how to use i f -el se: 

if (.condition) I 
statements 

} 

[ else { 

statements 

1] 
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The curly braces ({ and )) combine statements into one big block. For exam- 
ple, if you follow an i f condition with three JavaScript statements, all of which 
unded by curly braces, the JavaScript interpreter executes all three 
statements when the i f condition is true. 



The square brackets ([ and ]) mean that the entire else clause is optional. 
You don't actually put the square brackets in your JavaScript code; you just 
add the else clause if you want it or leave it off if you don't. 

Suppose that you want to figure out which browser a user is running so that 
you can tailor your Web page accordingly. (As you see in Chapter 5, differ- 
ences exist between the JavaScript support provided by Internet Explorer 
and Netscape Navigator.) Listing 3-1 shows how you can use If -el se (and 
the built-in navigator object) to accomplish this goal. 



Listing 3-1: JavaScript if-else Example 






if (navigator. appName == "Microsoft Internet E 
document .wri te( "You ' re running Microsoft 

] 


<plorer") { 
IE") 





el se ( 

if (navigator. appName == "Netscape") { 

document. wri te( "You ' re running Netscape") 

) 

el se ( 

document. wri te( "You ' re not running Microsoft IE or Netscape") 



First, the JavaScript code in Listing 3-1 compares the value of the appName prop- 
erty of the built-in navigator object to the text string Microsoft Internet 
Explorer. (A text string is a group of characters that you manipulate as a 
single block.) 

If this condition is true (the value of appName is indeed Microsoft 

I nternet Expl orer), the JavaScript code performs the next statement, 

which displays You ' re running Microsoft I E on the Web page. 

If the condition is false (the value of appName isn't Mi crosof t I nternet 
Expl orer), the JavaScript code tests to see whether the value of appName 
is equal to Netscape: 

• If this second condition is true, the JavaScript interpreter displays 

You're running Netscape on the Web page. 

• If the second condition is false, the JavaScript interpreter displays 

You're not running Microsoft IE or Netscape on the 
Web page. 
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You might notice that Listing 3-1 contains two if -el se statements, one 
nested inside the other. Technically speaking, you can nest as many i f -el se 
■^Jtaraeets as you want. If you run across a situation in which you need more 
jJifn\p^or two nested i f -el se statements to do the job, however, you might 
want to consider the switch statement (which I describe in the next section) 
instead. The switch statement is much more efficient at testing a condition 
multiple times. 



Some JavaScript programmers end each statement with a semicolon, like this: 



if (a == b) ( // if a is equal to b 

c = d; // assign the value of d to the c variable, 
e = f; // assign the value of f to the e variable, 
// and assign the string "American Beauty" 
// to the variable called favori teMovi e 
favori teMovi e = "American Beauty"; 

) 




Semicolons are optional in JavaScript, with one exception. If you place more 
than one JavaScript statement on the same line, you must separate those 
statements with semicolons. For example: 


// Wrong! 

c = d e = f favori teMovi e = "American Beauty" 




// Correct (if a bit hard to read 
c = d; e = f; favori teMovi e = "Am 


) 
e 


"i can Beauty"; 




switch 

The switch statement provides 


an easy way to check an expression for a 



bunch of different values without resorting to a string of i f -el se statements. 
Here's the syntax: 

switch (expression) ( 

case label : 

statement 

break 
case label : 

statement 

break 



default : statement 



Suppose you want to examine a value and find out whether it matches one of 
a number of predefined values. Listing 3-2 shows how you can go about it by 
using the switch statement. 



Part I: Building Killer Web Pages for Fun and Profit 
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slitch (month) 

pBooks 



di spl ayMonth 
break 



case 1 : 
di spl 
break 

case 2 : 
di spl 
break 
di spl 
break 

case 4 : 
di spl 
break 

case 5 : 
di spl 
break 

case 6 : 
di spl 
break 

case 7 : 
di spl 
break 

case 8 : 
di spl 
break 

case 9 : 
di spl 
break 

case 10 : 
di spl 
break 

case 11 : 
di spl 
break 



ayMonth 



ayMonth = 

case 
ayMonth = 



ayMonth 
ayMonth 
ayMonth 
ayMonth 
ayMonth 
ayMonth 
ayMonth 
ayMonth 



"January" 

"February" 

"March" 
i : 

"Apri 1 " 

"May" 

"June" 

"July" 

"August" 

"September" 

"October" 

"November" 

"December" 



default: di spl ayMonth = "INVALID" 

} 



The code shown in Listing 3-2 tests the value of the month variable. If month 
contains the number 0, the variable di spl ayMonth is set to January. If month 
contains the number 1, di spl ayMonth is set to Februa ry — and so on, all 
the way through the 12 months of the year. 
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The companion CD contains a date_and_time_f ormatted .htm file, a work- 
ing copy of the script in Listing 3-2. 

^^cjf^t^^ if you forget to finish each case with a brea k statement (and it's easy 
to do), the interpreter falls through, meaning that it performs all the statements 
that it finds until it either 



V Finds a break 

Detects the end of the switch statement 

For instance, in Listing 3-2, if you removed all the break statements, a month 
value of 0 would cause di spl ayMonth to be set not to January, as it should 
be, but to I N V A L I D instead. 




In some cases, you may want to leave out the break statement on purpose to 
force the JavaScript interpreter to fall through two or more cases. Doing so 
allows you to group values easily. For example, the following code treats month 
values of 0, 1, or 2 (which correspond to January, February, and March, respec- 
tively) the same, by assigning the value Ql to the displayQuarter variable. 
Months 3, 4, and 5 (April, May, and June, respectively) are treated the same, 
by assigning the value Q2 to the di spl ayQuarter variable; and so on. 



switch (monthld) { 




case 0: 






case 1: 






case 2: 






displayQuarter = 


"Ql"; 




break; 






case 3: 






case 4: 






case 5: 






displayQuarter = 


"Q2"; 


break; 




case 6: 




case 7: 




case 8: 




displayQuarter = 


"Q3"; 


break; 




case 9: 




case 10: 




case 11: 




displayQuarter = 


"Q4"; 


break; 

) 
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Fully functioning 



is a named group of JavaScript statements that you can declare 
&r the top of your script, and call over and over again. Adding a 
reusable function to your script — instead of adding several slightly dif- 
ferent versions of the same code — cuts down on the amount of typing that 
you need to do (yay!), as well as the number of potential bugs in your script 
(double yay!). 

Organizing your script into functions, like organizing your closet, might seem 
like loads of up-front work for nothing — after all, you don't have to do it. Your 
script and your closet can be functional even if they're messy The payoff comes 
when you have to quickly find a problem (or the perfect brown leather belt) 
hiding somewhere in all that confusion! 



Declaring a function 

Here's the syntax for a function declaration: 




function name( [parameter] [, parameter] [..., j 


>arameter]) ( 


statements 




return value 

1 





And here's an example: 



function cal cul ateTotal (numberOrdered, itemPrice) ( 

var totalPrice = (numberOrdered * itemPrice) + salesTax 
return totalPrice 

1 



This code snippet declares a cal cul ateTotal function that accepts two 
arguments: numberOrdered and i temPri ce. The function uses these two 
arguments (plus an additional variable called sal esTax) to calculate the 
totalPrice variable, which it then returns to the JavaScript code that 
originally called it. 

Your function can take as many arguments as you want it to (including none 
at all), separated by commas. You generally refer to these argument values in 
the body of the function (otherwise, why bother to use them at all?), so be sure 
to name them something meaningful. In other words, I could have substituted 
x and y for numberOrdered and i temPri ce, and the code would work just as 
well. It just wouldn't be very easy to read or maintain! 

Because the optional return statement is so important, I devote a whole sec- 
tion to its use. (See the section "Returning a value from a function.") 
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Calling a function 

Af|er you declare a function, which I describe in the preceding section, you 
hat function. You call a function by specifying the name of the func- 
wed by an open parenthesis, comma-delimited parameters, and a 
closing parenthesis. For example: 



alertt "Total purchases come to " + 
calculateTotaldO, 19.95)) 



Notice that you can embed a function call within another expression. In this 
example, calculateTotaldO, 19.95) is actually part of the expression being 
sent to the a 1 ert ( ) method. (You find out all about methods in Chapter 4, but 
for now, you can think of them as special kinds of functions.) 



Returning a Value from a function 

You use the return statement to return a value from a function. To under- 
stand why you might want to return a value from a function, imagine yourself 
asking a friend to look up some information for you. If your friend went ahead 
and did the research but neglected to pass it along to you, you'd be pretty 
disappointed. Well, in this case, you're just like a bit of JavaScript code call- 
ing a function, and your friend is the function that you're calling. Basically, 
no matter how many useful things a function does, if it doesn't return some 
sort of result to the piece of code that needs it, it hasn't finished its job. 



The syntax for the return keyword is simple: 



return expression 



Here's how it looks in action: 



function cal cul ateTotal (numberOrdered , itemPrice) { 



var totalPrice = (numberOrdered * itemPrice) + salesTax 
return totalPrice 
) // Now the function is defined, so it can be called 



document .wri te( "The total amount to remit to us is " + cal cul ateTotal (3 , 4.99)) 

In this example code, the document.writeO method calls the cal cul ate 
Total ( ) function. The calculateTotal ( ) function returns the value of the 
totalPrice variable, which the document .wri te( ) method then displays 
on the Web page. 
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Loop'the-loop 

Lopps are powerful constructs that you can use to reiterate a series of 

t statements over and over again. JavaScript supports a number 
ou can choose from, including the for loop and for-in loops, 
the whi 1 e loop, and the do-while loop. As you see in the following section, 
each loop is tailored for specific kinds of situations. 



The for loop 

The for loop lets you step through, or traverse, a number of items quickly 
and easily. As an example, suppose that you want to find out whether users 
have a particular plug-in installed in their Web browsers. You can use the 
for loop to step through each of the plug-ins one by one. 

First, take a peek at the generic form of the for loop. 

for ([initial expression]; [condition]; [update expression]) { 

statements 

) 



The for loop introduces three terms that might be new to you: the initial 
expression, the condition, and the update expression. Here's how it all works: 



1. The JavaScript interpreter looks at the initial expression. 

The initial expression is almost always a number (usually 0 because 
that's the number JavaScript arrays begin with) assigned to a variable, 
such as va r i =0. 

2. The JavaScript interpreter looks at the condition to see whether it's true. 

The condition compares the variable in Step 1 to some programmer- 
defined constant; for example, i <10. If the value of i is indeed less 
than 10, for instance, the i <10 statement is true. 

3. If the value of the condition is true, the JavaScript interpreter performs 
all the statements in the body of the for loop, and then it evaluates the 
update expression. 

The update expression typically increments the initial expression by 1 ; 
for example, i++ or each0ne++. (Although ++ looks kind of funny, it's not 
a typo. It's an operator that adds 1 to the variable that it's next to. Think 
of each0ne++ as a shorthand way of typing eachOne = eachOne + 1.) 

4. Now that the variable has been bumped up, the JavaScript interpreter 
goes back to Step 2 to see whether value of the condition is true, and if 
it is, the whole thing starts over again. (That's why it's called a loop!) 

Of course, at some point the condition's value is no longer true. When 
that happens, the JavaScript interpreter hops out of the f o r loop and 
picks up again at the first statement after the loop. 
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sJ^NG/ It's possible to create a for loop condition that always has a true value. The 
easiest way to make this mistake is to specify an update condition that doesn't 
^"%clu^il>*jjpdate the initial expression (for example, leaving off the ++ in the 
l > _yq[\|^frcode preceding steps.) Creating a loop condition that is always true 
and can never be changed or set to fa 1 se is known as creating an endless or 
infinite loop because the JavaScript interpreter evaluates and performs the 
same statements in the body of the loop endlessly! (Okay never is a long time. 
In practice, the interpreter keeps evaluating it until you kill the Web browser 
session. I've found that turning off the machine works nicely.) 

Here's an example of the for loop in action. 

for (var i = 1; 1 <= 10; i++) ( 
document .wri tel n( i ) 

) 

The file detecting_embedded_objects.htm, which you find on the companion 
CD, contains an example of the for loop in action. 

Here's what's going on in the preceding code snippet: 

1 . v a r i = 1 creates a variable called i and sets it to equal 1 . 

2. i <= 10 tests to see whether the i variable is less than or equal to 10. 

3. The first time through, i is 1, and 1 is less than or equal to 10, so the 
statement in the body of the for loop (document .wri tel n ( i )) is per- 
formed. (The value of i appears on the Web page.) 

4. i ++ adds one to i . 

5. i <= 10 tests to see whether i is still less than or equal to 10. 

6. The second time through, i is 2, and 2 is less than 10, so the statement 
in the body of the for loop (document .wri tel n ( i )) is performed. 
(The value of i appears.) 

7. Now the whole thing repeats from Step 3. The JavaScript interpreter 
adds one to i , tests the variable to see whether it's still less than or 
equal to 10, and so on, for as many times as i satisfies the condition. 

Nothing is magical about the i variable name. You could just as easily have 
named your variable numberOfTimesToPrint,numberOfPigsOrdered,or 
Fred. The i variable name in for loops just happens to be a convention, 
nothing more. 

As you might expect, the following appears on-screen when the for loop is 
executed: 




1 2 3 4 5 6 7 8 9 10 
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The for-in loop 

If jou like for, you'll love the f or-i n loop. You use the for-in loop for loop- 
rating, through all properties of an object, like so: 



for (var in object) { 
statements 



As an example, here's a function that you can use to loop through all pro- 
perties of a given object and display each property's name and associated 
value: 



function di spl ayProperti es ( i nputObject , i nputObjectName) { 


var result = "" 






for (var eachProperty in inputObject) ( 






result += i nputObjectName + "." + eat 
" = " + inputObject[eachProperty] + "<[ 

) 


:hProperty + 
5R>" 




return result 

1 







This code might appear confusing at first, but it's pretty straightforward 
when you understand what the f or-i n loop does: 

1 . The code declares a function called displayProperties( ) that accepts 
two arguments: inputObject and inputObjectName. Here's one way to 
call this function: 

document. writelnt display Properties (document, "document") ) 

2. The JavaScript interpreter hops up to the displayPropertiesO defini- 
tion, only this time it substitutes the document object for the argument 
inputObject and substitutes the "document" string for the argument 

i nputObjectName. 

3. Inside the f or - i n loop, the JavaScript interpreter loops through all prop- 
erties of the document object. Each time it comes to a new property, the 
interpreter assigns the new property to the eachProperty variable. Then 
the interpreter constructs a string and adds the string to the end of the 
result variable. 

After the f or-i n loop has looped through all properties of the document 
object, the result variable holds a nice long string containing the names 
and values of all properties in the document object. (For the skinny on 
objects, flip to Chapter 4.) 
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Displaying (or dumping, as it's called in programmerese) the property values 
of an object can be useful when you're trying to track down an error in your 
k method like document. writelnO enables you to know exactly what 
jreter thinks objects look like (which is sometimes quite different 
from the way you think they look). 



Take a look at the ch3_f ori n . htm file to see an example of the f or-i n loop. 
The White hop 

The while loop's job is to do something — that is, to execute one or more 
JavaScript statements — while some programmer-defined condition is true. 



Obviously, then, you want to make sure that one of the statements in the body 
of your while loop changes the while condition in some way so that at some 
point it becomes false. 

Here's the generic version of the while loop. 



while (condition) ( 
statements 



In the following code, you see an actual JavaScript example of the while loop 
in action. 



var total Inventory=700 
var numberPurchased=200 
var numberSal es=0 



while (total Inventory > numberPurchased) { 

total Inventory = total Inventory - numberPurchased 
numberSal es++ 

) 

document. writelnC'Our stock supply will support " + 
numberSales + " of these bulk sales") 



Step into the JavaScript interpreter's virtual shoes for a minute and take a 
look at how this all works! (Remember, you're the JavaScript interpreter now, 
so be serious.) 

While the total inventory is more than the number purchased. . . . Well, 
700 is greater than 200. Okay. Subtract the number purchased from the 
total inventory and bump up the number of sales by 1 . Number of sales is 
now 1. That's one loop down. 

While the total inventory is more than the number purchased. . . . Hmm. 
Total inventory is 500 now, and that's still greater than 200, so I need to 
subtract the number purchased from the total inventory and add another 
1 to the number of sales. Number of sales is now 2. Two loops down. 



Part I: Building Killer Web Pages for Fun and Profit 



total 

pBoofe' 



While the total inventory is more than the number purchased. . . . Okay, 
total inventory is 300 now, which is still greater than 200. Subtract number 
hased from total inventory, add 1 to the number of sales. Number of 
is now 3. Three loops down. 



While the total inventory is more than the number purchased. . . . Hey! 
It's not! Total inventory is 100, and the number purchased is 200. I'm 
outta here. 

Here's what I'll write to the screen: Our stock supply will support 3 
of these bulk sales. 



Nice to know how the other half thinks, isn't it? 



The do-while hop 

The do-whil e loop is mighty close to the while loop that I describe in the 
preceding section. The main difference between the two loops is that unlike 
while, which might never be executed depending on whether the value of 
the whi 1 e condition is true when the loop begins to execute, the do -whi 1 e 
loop always executes at least once. 



Take a look at the syntax f or the d o - w h i 1 e loop: 



do ( 

statements 

1 

while (condition) 












Here's a real-life example: 











var article = "a" 



do ( 

var answer = prompt( "Would you like to purchase " 
+ article 

+ " t-shirt? If so, enter the size.", "L") 
article = "ANOTHER" 

) 

while (answer != null ) 



The first time this JavaScript code executes, the user sees a dialog box contain- 
ing this message: Woul d you like to order a t-shirt? If so, enter 
the si ze . The second time through the do whi 1 e loop (and for each time 
thereafter that the user clicks the OK button on the dialog box) this message 
appears: Woul d you like to order ANOTHER t-shirt? If so, enter 
the size. 

Load up the data_gathering.htm file to see a working example of the 
d o - w h i 1 e code shown here. 
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Net/er mind! Changing your mind With continue and break 

The conti nue and break statements are both used inside loops to change 
TVaL^tl^Joops behave. (The break statement can be used also inside a swi tch 
matement, as the example earlier in this chapter demonstrates.) The conti nue 
and break statements do slightly different things and can be used in the same 
loop (although they don't have to be). 

When the JavaScript interpreter encounters a break statement, the interpreter 
breaks out of the loop that it's currently processing and starts interpreting 
again at the first line following the loop. 

In contrast, the conti nue statement also tells the JavaScript interpreter to 
stop what it's doing, but on a somewhat smaller scale. The continue state- 
ment tells the interpreter to stop the loop it's currently processing and hop 
back up to the beginning of the loop again, to continue as normal. 

The conti nue and break statements are useful for exceptions to the rule. 
For example, you might want to process all items the same way except for 
two special cases. Just remember that break breaks out of a loop altogether, 
and continue stops iteration execution, but then continues the loop. 



Here is an example of the break statement used inside a whi 1 e loop: 



var total I nventory=700 , numberPur 


chased=200, numberSal es=0 




while (total Inventory > numberPur 


chased) { 




total Inventory=total Inventory 




- numberPurchased 




numberSal es++ 








if (numberSales > 2) { 








break 

1 

1 









When the number of sales is greater than 2 (in other words, when the number 
of sales reaches 3), the break statement causes the JavaScript interpreter to 
hop out of the while loop altogether. 



And here's an example of conti nue used inside a for loop: 

for (var i = 1; i <= 20; i++) { 

if (i == 13) ( // superstitious; don't print number 13 
continue 

1 

document .wri tel n( i ) 

1 

In this code snippet, when the i variable contains the value 13, the JavaScript 
interpreter stops what it's doing. It does not execute the wri tel n ( ) method 
but continues on with the next iteration of the for loop (that is, the interpreter 
sets the i variable equal to 14 and keeps going). 
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You can test this scrap of code for yourself. It should produce the following 
result: 



»5 6 7 8 9 10 11 12 14 15 16 17 18 19 20 
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Operators are standing by 



Operators are like conjunctions. Remember fifth-grade English? (Or if you 
were a cartoon connoisseur, maybe you remember "Conjunction Junction." 
"And, but, and or, get you pretty far. . . .") Ahem. 

Operators, like conjunctions, enable you to join multiple phrases together 
to form expressions. If you're familiar with addition and subtraction, you're 
familiar with operators. Two categories of operators exist: 

I*** Binary: Two items (or operands) must be sandwiched on either side of 
the operator. 
i>* Unary: Only one operand is required. 

Table 3-1 gives you a rundown of the basic operators. The JavaScript inter- 
preter always evaluates the expression to the right of the equal sign first, and 
only then does it assign the evaluated value to the variable. (Note: The two 
exceptions to this rule include the unary decrement operator (- -), and the 
unary increment operator (++). In these cases, if you place the operand after 
the operator — as in the expression - - 1 — the JavaScript interpreter evaluates 
the expression before evaluating anything else in the statement, including any 
assignment. Check out Table 3-1 for more information about the decrement 
and increment operators.) 



Table 3-1 JavaScript Operators 


In all these examples, x is initially set to 11. 




Operator Meaning Example Result 


How Come? 


% modulus x = x % 5 x = l 


11/5 = 2 with 1 remainder, so 
modulus returns 1 in this case 


++ increment x = x++ x = 11 


++ is applied after assignment 
when you put it after x 


x = ++x x = 12 


++ is applied before assign- 
ment when you put it before x 


decrement x = x-- x = 11 


- is applied after assignment 
when you put it after the var 



x = --x x = 10 - is applied before assignment 
when you put it before the var 
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In all these examples, x is initially set to 11. 


"\ lOpqOor Meaning 


Example Result 


How Come? 


negation 


x = -x x = -11 


Turns positive numbers nega- 






tive and vice versa 


+ addition 


x=x+x x=22 


11 + 11 is 22 



Some of the operators are pretty normal (addition and negation, for example). 
The increment and decrement operators are a little weird, though, because not 
only are they a new thing (you never see ++ or - - outside a computer program 
listing), but depending on whether you put them before or after the variable, 
they behave differently, as I describe in Table 3-1. 

Operator precedence 

Just as in math, an order of evaluation is applied to a statement that contains 
multiple operators. Unless you set phrases off with parentheses, the JavaScript 
interpreter observes the precedence order shown in Table 3-2 (from the semi- 
colon, which has the lowest order of precedence, to the parentheses, which 
has the highest). 



Table 3-2 


JavaScript Operator Precedence 
(From Lowest to Highest) 




Operator 


Syntax 






semicolon 


; (separates JavaScript statements that appear on thf 


; same line) 


comma 




assignment 


=,+=,-=,*=, 


/=,% = 




conditional 


? ; 






logical "or" 


logical "and" && 


equality ==, ! = 


relational 


<, <=, >, < = 






mathematical 


+, ",*, l,% 







unary !,",++, - - (negation, increment, and decrement operators) 



call 
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So, how exactly does operator precedence work? Well, suppose the JavaScript 
interpreter runs into the following statement in your script: 



rand total: " + getTotalO + (3 * 4 / 10) + tax++) 

The interpreter knows that its job is to evaluate the statement, so the first 
thing that it does is scan everything between the a 1 e rt ( ) parentheses. When 
it finds the next set of parentheses, it knows that's where it needs to start. It 
thinks to itself, "Okay, first I'll get the return value from getTota 1 ( ) . Then I'll 
evaluate (3 * 4 / 10). Within (3 * 4 / 1 0 ), I'll do the division first, and 
then the multiplication. Now I'll add one to the tax variable. Okay, the last 
thing I have to do is add the whole thing to come up with a string to display." 

Frankly, it's okay if you can't remember the precedence order. Just group 
expressions in parentheses like you did back in high school algebra class. 
Because parentheses outrank all the other operators, you can force JavaScript 
to override its default precedence order and evaluate expressions the way 
that makes the most sense to you! 



Assignment operators 

Assignment operators enable you to assign values to variables. Besides being 
able to make a straight one-to-one assignment, though, you can also use some 
assignment operators as a kind of shorthand to bump up a value based on 
another value. Table 3-3 describes how this process works. 



Table 3-3 


JavaScript Assignment Operators 
(From Lowest to Highest Precedence) 


Assignment 


Alternate Approach 


Description 


x = y 


(none) 


(assignment) 


x += y 


x = x + y 


(addition) 


x -= y 


x = x-y 


(subtraction) 


x *= y 


x = x*y 


(multiplication) 


x /= y 


x = x/y 


(division) 


x %= y 


x = x % y 


(modulus) 



The order of precedence in Table 3-3 is from lowest to highest, so the JavaScript 
interpreter first evaluates any modulus operations first, then division, then 
multiplication, and so on. 
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Comparison operators 
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comparing two values or expressions, you can compare for equality, as 
Table 3-4. 



Table 3-4 



JavaScript Comparison Operators 



Operator 


Example 


Meaning 






x == y 


x is equal to y 




i = 


x != y 


x is not equal toy 




< 


x < y 


x is less than y 




> 


x > y 


x is greater than y 




<= 


x <= y 


xis less than or equal 


to y 


> = 


x >= y 


x is greater than oreqi 


jal to y 


7 ; 


x = (y < 0) ? -y : y 


if y is less than zero, assign -yto 
x; otherwise, assign yto x 



Logical operators 

Logical operators take logical (also called Boolean) operands, and they also 
return Boolean values. A Boolean value can be just one of two possibilities: 
true or false. When you see two expressions separated by a logical opera- 
tor, the JavaScript interpreter first resolves the expressions to see whether 
each is true or f al se, and then resolves the entire statement: 

i>* If an expression equates to a nonzero value, that expression is consid- 
ered to be true. 

If an expression equates to zero, that expression is considered to be f al se. 
Table 3-5 describes the logical operators available in JavaScript. 



Table 3-5 JavaScript Logical Operators 



Operator 


Meaning 


Example 


&& 


and 


if (x == y && a != b) 


II 


or 


if (x < y || a < b) 


] 


not 


if (!x) 
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The neu/ and this operators 

Two operators are designed especially to work with objects: new and this. 



'operator allows you to create your very own objects in JavaScript. 
(For a list of built-in objects, check out Chapter 4.) 

When you use the new operator with a function that defines a type of object, 
you can create an instance (or a dozen instances) of that type of object. 

The best way to explain this is by an example. Suppose that you want to 
write a script that lets users input information about multiple people — 
family members, say, or employees. You can create a generic function called 
person and then use the new and this operators to allow users to create 
multiple instances of the person function and customize each instance. 
Here's an example of a simple, generic person function: 

function persondnputName, i nput Age , i nputSex , inputOccupation) ( 
this. name = inputName 
this. age = inputAge 
this. sex = inputSex 
this. occupation = inputOccupation 



The person ( ) function that you see here takes four parameters, one each for 
inputName, inputAge, inputSex, and inputOccupation. Then the person ( ) 
function immediately assigns these input values to its own instance attributes. 
(The thi s . name variable is set to the i nput Name variable, the thi s . age vari- 
able to the i nputAge variable, and so on.) 



Watch out! 

A common mistake, even (especially?) among seasoned programmers, is to use a single equal sign 
(=, an assignment operator) in place of a double equal sign (==, a comparison operator) or vice 
versa. The statement x = 6 assignsthe value of 6 to x. The x == 6 statement, on the other hand, 
compares 6 to x but doesn't assign any value at all! Mistakenly typing == when you mean = (or vice 
versa) is a very common programming bug. 

if (x = 6) I // At first glance, this looks like it compares 6 to x, but it doesn't. It 
assigns 6 to x! 
document .wri tel n( "x is 6, all right.") 

1 
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In this example, the thi s keyword is shorthand for the person function. The 
JavaScript interpreter knows that you're inside a function called person ( ), 
matically substitutes the function name for the this keyword so 
on't have to spell out the whole function name. 



Now, whenever you want to create a specific, concrete instance of the person 
function, here's what you do: 

var Jennifer = new person( "Jenni fer McLaughl an" , 33, "F", "lion tamer") 

This code snippet uses the new operator in conjunction with the predefined, 
generic person ( ) function to create a specific instance of person whose name 
is Jennifer McLaughlan, age is 33, sex is F, and occupation is lion tamer. 

After the preceding statement is performed, you can use the jenni fer object 
as you would any built-in object in JavaScript. 

If you think that objects with properties but no methods are kind of boring, 
you're right. Here's how you add your own methods to the objects that you 
create: 

function f tal k( ki ndOf Pet ) ( 
if (kindOfPet == "dog") { 

document .wri t el n( "bow-wow! " ) 

) 

el se { 

if ( ki ndOf Pet == "cat") ( 

document .wri t el n( "meow -meow-meow" ) 



function pettinputName, inputKind, inputColor) { 
this. name = inputName 
this. kind = inputKind 
this. color = inputColor 
this. talk = ftal kCinputKind) 

} 

Bear with me here; it all makes sense when you see it in action! 

The following code first creates an instance of pet and names that instance 
Boots, and then it calls the tal k ( ) method associated with Boots. 



Boots = new petC'Boots", "cat", "orange striped") 
Boots. talk; 
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Here's how the JavaScript interpreter executes these two JavaScript 
statements: 
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first statement passes three variables to the pet ( ) constructor 
function and assigns the resulting object to the Boots variable. 

When this first statement finishes processing, the Boots variable con- 
tains an object associated with the following three properties: 



Soots. name = 
Soots. kind = 
Soots .col or 



"Boots" 
"cat" 

: "orange striped' 



2. The second statement (Boots .talk) passes the value of Boots . ki nd, 
which is "cat", to the ftal k( ) function. 

3. The f ta 1 k ( ) function contains an i f statement that says, "If the input 
variable is cat, print meow-meow-meow to the screen." 

So, because the string "cat" was passed to the ftal k( ) function, you 

see meow-meow-meow on the screen. 

If creating your own objects and methods isn't clear to you right now, it will 
be after you've had a chance to load and play with the ch2_new_thi s . htm 
file, located on the companion CD. 



Working With Variables 

A variable is a named placeholder for a value. You use the v a r keyword to 
construct an expression that first declares a variable and then (optionally) 
initializes its value. To declare a variable, you type something like this: 

var myCat; 

This tells the JavaScript interpreter "Yo, here comes a variable, and name it 
my Cat, will you?" 

Initializing a variable means setting a variable equal to some value, which you 
typically do at the same time you declare the variable. Here's how you might 
initialize the variable myCat: 

var myCat = "Fluffy" 




Technically, you can declare a variable in JavaScript without using the var 
keyword, like so: myCat = " Fl uffy". However, using the var keyword to 
declare all your variables is a good idea because it helps the JavaScript inter- 
preter properly scope variables with the same name. 
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sfi-STifet, As of this writing, the next version of JavaScript, version 2.0 — due to be 
finalized later this year and (with luck) supported by upcoming browser 

Oelsioji^ — provides for the strongly typed variables with which C and C++ 
rpar,^frners are familiar. What this means to you is that when browsers sup- 
port JavaScript 2.0, you may use variable descriptors such as i nteger and 
number to declare upfront precisely what kind of value you want each vari- 
able to contain. Until then, however, no variable descriptors are necessary. 

After you declare a variable — whether you use the v a r keyword or not — you 
can reset its value later in the script by using the assignment operator (=). The 
name of the variable can be any legal identifier (you want to use letters and 
numbers, not special characters), and the value can be any legal expression. 
(A legal expression is any properly punctuated expression that you see repre- 
sented in this chapter: an i f -el se expression, an assignment expression, and 
so on.) 

A variable is valid only when it's in scope. When a variable is in scope, it's been 
declared between the same curly brace boundaries as the statement that's 
trying to access it. For example, if you define a variable named firstName 
inside a function called displayReport( ), you can refer to the variable only 
inside the di spl ay Report ( ) function's curly braces. If you try to access 
firstName inside another function, you get an error. If you want to reuse a 
variable among functions (shudder — that way lies madness), you can declare 
that variable near the top of your script before any functions are declared. 
That way, the variable's scope is the entire script, and all the functions get 
to see it. Take a look at the following code example: 



function di spl ayReport( ) { 

var firstName = document. myForm.givenName. value 

alertC'Click OK to see the report for " + firstName) 
// Using firstName here is fine; it was declared 
// inside the same set of curly braces. 



functi on di spl ayGraph( ) ( 

al ert( "Here ' s the graph for " + firstName) // Error! 
// firstName wasn't defined inside this 
// function's curly braces! 



As you can see from the comments in the this code fragment, it's perfectly 
okay to use the firstName variable inside the di spl ay Re port ( ) func- 
tion because the f i rstName variable is in scope anywhere inside the 
di spl ayReport( ) function. It's not okay, however, to use f i rstName inside 
di spl ayGraph ( ). As far as di spl ayGraph ( ) is concerned, no such animal 
as f i rstName has been declared inside its scope! 
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^omefimes you want to use a number, a string, or some other value that you know for a fact will 
never change. For example, suppose that you want to write a script that uses pi in some calculation. 
Instead of creating a pi variable and assigning it the value of 1 . 31415, you can use the number 
1.31415 directly in your calculations. Values that aren't stored in variables are called literals. 

Here are a few examples of using literals in JavaScript: 

al ert( "Sorry , you entered your e-mail address incorrectly. ")//string literal 
x = 1.31415 * someVariable // floating-point literal 
if (theAnswer == true) // boolean literal 

document . wri te( "The total number of users is " + 1 234 ) // i nteger literal 



Putting It All Together: Building 
JavaScript Expressions and Statements 



In "JavaScript Syntax," earlier in this chapter, you get familiar with the nuts 
and bolts of the JavaScript language. In this section, I demonstrate how to 
string these components together to create JavaScript expressions and 



JavaScript scripts are made up of JavaScript statements, which in turn are made 
up of JavaScript expressions. A JavaScript expression is any combination of 
variables, operators, literals (nonvarying values), and keywords that can be 
evaluated by the JavaScript interpreter. 

For example, the following are all valid JavaScript expressions: 

new Date( ) 

numberSold * salesPrice 

"Thanks for visiting my site, " + document. myForm.yourName. value 

These three examples are each slightly different, but they all have one thing in 
common: They can all be evaluated to something. The first example evaluates 
to the current date; the second, to a number; the third, to a string. (A string is 
a group of characters that you manipulate as a single block.) 



statements. 
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To create a JavaScript statement, all you need to do is put together one or more 
JavaScript expressions (shown in bold in the following code). For example: 



s_date = new Date( ) ; 
cal cul ateTotal (numberSold * salesPrice); 



al ert( "Thanks for visiting my site, " + document. myForm.yourName. value) ; 



In the first statement shown here, the current date is assigned to a variable 
called todays_date. In the second statement, the number produced by 
multiplying the numberSold and salesPrice variables is passed to the 
cal cul ateTotal ( ) function. And in the third example statement, the 
"Thanks for visiting my site " string appears in a dialog box. 

The difference between a JavaScript expression and a JavaScript statement 
might seem esoteric at first, but understanding this difference pays big divi- 
dends in the long run. It might help if you think of a JavaScript expression 
as a sentence fragment and a JavaScript statement as a complete sentence. 
Although an interoffice memo composed entirely of sentence fragments 
might not cause you any problems (unless your vocation happens to be 
teaching English), a JavaScript script composed of expressions does cause 
problems — in the form of runtime errors. 

To prevent these errors (and to save the time you'd spend debugging them), 
you need to construct complete JavaScript statements. In the following sec- 
tions, I use three useful scripts to demonstrate how to do just that. 



The browser-detection script 

Back in the old days, before the Web came along, developers knew exactly 
what hardware and software their audience would use to run their applications 
before they wrote a lick of code. (In other words, these developers knew their 
applications' target platforms in advance.) Using this information, developers 
could implement their applications with confidence, secure in the knowledge 
that their application code would behave in the field just as it did in their 
testing labs. 

Not so on the Web. Users can choose to view Web pages with whatever target 
platform they choose. They might, for instance, use a Mac, a PC, a UNIX box, 
or a hand-held device running some version of Netscape Navigator, Internet 
Explorer, or any of the other dozens of Web browsers that are available on 
the market. Unfortunately, your users' choices affect their ability to run your 
JavaScript-enabled Web pages, as you see in this chapter. 
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TetsT3pe""[with stflrie help from Sun Micro- 
systems) invented JavaScript clear back in the 
early 1990s, so it's no surprise that JavaScript 
support first appeared in Netscape's browser 
(Netscape Navigator 2.0, if you're a history buff). 

Soon after, Microsoft released version 3.0 of 
Internet Explorer, which featured support for their 
own JavaScript-compatible scripting language — 
called JScript Minor differences existed between 
these two browsers' scripting implementations, 
however, and as each successive version 
appeared, those differences continued to grow. 

In 1998, Netscape decided to hand overthe task 
of creating a formal JavaScript standard to the 
ECMA, an international standards body com- 
prising companiesfrom all overthe world. (Both 
Netscape and Microsoft are ECMA members.) 
In theory, this was a great thing. It allowed a rel- 
atively impartial group of folks to decide the best, 
most efficient way to implement a cross-browser 
Web scripting language. Unfortunately — in 
software as in life — the reality of real-world 
implementation hasn't quite yet achieved the 
perfection promised by the standard. 



The ECMAScript language specification, called 
ECMA-262, describes how a scripting language 
should be implemented in an ECMA-compliant 
browser, not how it is implemented. So even 
though ECMAScript has the potential to unify 
JavaScript implementations and guarantee devel- 
opers a consistent, cross-browser JavaScript 
execution platform, the differences in JavaScript 
support still exist between the latest Navigator 
and Internet Explorer browsers. One reason for 
these differences is the inevitable lag time 
between creating a standard and then scurry- 
ing to implement and release it. Another reason 
is the inherent tendency of software companies 
to embellish standards with additional, propri- 
etary features. (The same tendency that led to 
the need for a standard in the first place!) 

The bottom line is this: Although ECMAScript 
offers the potential for increased consistency 
across browsers, the final word on JavaScript 
implementation comes from the browsers them- 
selves — not the specification. 



The two latest versions of the most popular Web browsers — Internet Explorer 
and Netscape Navigator — do support JavaScript. But despite their creators' 
claims of support for something called the ECMA standard (created by the 
European Computer Manufacturers Association) both browsers support 
slightly different versions of the following elements: 

The JavaScript language 

*** The document object model that the JavaScript language was designed 
to access 
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Unfortunately, no single up-to-date source exists that describes which 
JavaScript features are supported in which version of which browser. Your 
fcis to visit Netscape's and Microsoft's JavaScript documentation 
the latest in feature support: 

http: //channel s. netscape. com/ns/browsers/default.jsp 
i>* www .mi crosof t .com/windows/ie/default.htm 



What this means is that if you want to use a JavaScript feature that Internet 
Explorer supports (but that Netscape Navigator doesn't), you face three 
choices: 



Assume that everyone who visits your Web site is running Internet 
Explorer. This assumption might be correct if you're creating an 
intranet application (an application targeted for use on a company's 
private network); in this case, you might know that all the company's 
employees have Internet Explorer installed. However, if you want to 
make your pages available on the World Wide Web, this assumption 
isn't a good one. When you make it, you risk alienating the visitors 
who surf to your page with Netscape or some other non-Microsoft 
browser. 

W Don't use the feature. You can choose to use only those JavaScript fea- 
tures that are truly cross-platform; that is, JavaScript features that work 
the same way in both Internet Explorer and Netscape Navigator. (In most 
cases, this is the easiest approach, assuming that you can keep up with 
the rapidly changing JavaScript support provided in each new browser 
version.) In some cases, however, avoiding a feature might not be an 
option (for example, if you're creating a page for your boss or a client). 

V Create a script that detects which browser your visitors are running 
and tailor your pages on-the-fly accordingly. This option gives you the 
best of both worlds: You get to use the specialized browser features that 
you want, and yet you don't alienate users running different browsers. 
(You do, however, have to create multiple pages to support multiple 
browsers, which increases your workload.) 

In Listing 3-3, 1 demonstrate the final option in the preceding list: a script that 
recognizes whether a user is running Internet Explorer, Netscape Navigator, 
or some other browser. The script then displays an appropriate Web page. 
Figure 3-1 shows you how the script appears when loaded into Netscape 7.1, 
and Figure 3-2 shows you how it appears when it's loaded into Internet 
Explorer 6.0. 
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browser- 
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Figure 3-2: 

The 
browser- 
detection 
script as it 
appears in 
Internet 
Explorer 6.0. 
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You can experiment with the code shown in Listing 3-3: Just load the file 
1 i st0302 . htm, which you find on the companion CD. 




-3: The Browser-Detection Script 



<HTML> 

<HEADXTITLE>Simple browser detection scri pt</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt" "TYPE="text/javascri pt"> 
<!-- Hide from browsers that do not support JavaScript 

// If the user is running IE, automatically load the 

// HTML file ie_version.htm 

// Beginning of an if/else statement: 

// "Microsoft Internet Explorer" is a string literal 

// == is a comparison operator 

if (navigator. appName == "Microsoft Internet Explorer") ( 
// "ie_version.htm" is a string literal 
wi ndow. 1 ocati on = "ie_version.htm" 
// = is a comparison operator 

1 

// Otherwise, if the user is running Netscape, load the 
// HTML file netscape_version.htm 

el se I 

Nested if/else statement: 

if (navigator. appName == "Netscape") ( 

// == is a comparison operator 

window. location = "netscape_version.htm" 

// = is a comparison operator 

1 

// If the user is running some other browser, 

// display a message and continue loading this generic 

// Web page. 

el se { 

document. wri te( "You ' re not running Microsoft IE or Netscape.") 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 

<B0DY> 

This is the generic version of my Web page. 

</B0DY> 
</HTML> 

The code that you see in Listing 3-3 combines comments, conditionals, and 
operators to create two complete JavaScript statements. 
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appName property of the built-in navigator object is preloaded 
one of two text strings: "Microsoft Internet Explorer" (if the loading 
browser is Internet Explorer) or "Netscape" (if the loading browser is 
Netscape Navigator). 

V Setting the wi ndow property of the location object equal to a new Web 
page causes that new Web page to load automatically. 

Determining which brand of browser a user runs is relatively easy, as you can 
see by the code in Listing 3-3. However, determining the browser version is 
much trickier — and beyond the scope of this book. (Although the built-in 
navi gator object does indeed contain useful properties such as appCodeName, 
appName, appVersion, use rA gent, language, and pi atf orm — all of which 
you can display on-screen by using the a 1 e rt ( ) method — the contents of 
these properties are neither intuitive nor consistent between browsers.) For 
more information on browser-version detection, visit http://developer. 
netscape. com/docs/examples/javascri pt/browser_type_oo . html . 



The date-formatting script 



In Chapter 2, 1 introduce a simple date-and-time-stamp script that 
the current date and time and displays it on a Web page, like so: 


captures 


Sat May 22 19:46:47 CDT 2004 








In this section, I demonstrate hov 


r to combine comments, conditionals, opera- 



tors, and variables into JavaScript statements that not only capture the current 
date and time but format the date and time so that they appear in a more 
human-friendly format, like the following: 

Good evening! It's May 22, 2004 - 8:24 p.m. 

To see how, take a look at the code in Listing 3-4. 




You can find the code shown in Listing 3-4 on the companion CD by loading 

up the 1 i st0303 . htm file. 



Listing 3-4: The Date-Formatting Script 

<HTML> 
<HEAD> 

<TITLE>Displaying the current date and time (formatted exampleX/TITLE) 
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<SCRIPT LANGUAGE-" JavaScn" pt" TYPE="text/javascri pt"> 



// Comments begin with // 
// Get the current date 

// The following statements declare variables 
var today = new Date( ) ; 

// Get the current month 

var month = today . getMonth( ) ; 

// Declare a variable called displayMonth 
var di spl ayMonth=" " ; 

// The following is a switch statement 

// Attach a display name to each of 12 possible month numbers 
switch (month) I 
case 0 : 

displayMonth = "January" 

break 
case 1 : 

displayMonth = "February" 

break 
case 2 : 

displayMonth = "March" 

break 
case 3 : 

di spl ayMonth = "Apri 1 " 

break 
case 4 : 

displayMonth = "May" 

break 
case 5 : 

displayMonth = "June" 

break 
case 6 : 

displayMonth = "July" 

break 
case 7 : 

displayMonth = "August" 

break 
case 8 : 

displayMonth = "September" 

break 
case 9 : 

displayMonth = "October" 

break 




browsers that do not support JavaScript 



(continued) 
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cajLe 10 : 

displayMonth = "November" 
break 
case 11 : 

displayMonth = "December" 
break 



default: displayMonth = "INVALID" 



// Set some more variables to make the JavaScript code 
// easier to read 



var hours = today. getHours( ) ; 

var minutes = today. getMinutes( ) ; 

var greeting; 

var ampm; 



// We consider anything up until 11 a.m. "morning" 



if (hours <= 11) { 

greeting = "Good morning!"; 
ampm="a .m. " ; 



// JavaScript reports midnight as 0, which is just 
// plain crazy; so we want to change 0 to 12. 



if (hours == 0) { 
hours = 12; 



// We consider anything after 11:00 a.m. and before 
// 6 p.m. (in military time, 18) to be "afternoon" 

else if (hours > 11 && hours < 18) I 
greeting = "Good afternoon!"; 
ampm = "p.m."; 

// We don't want to see military time, so subtract 12 

if (hours > 12) { 
hours -= 12; 
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// We consider anything after five p.m. (17 military) but 
// before nine p.m. (21 in military time) "evening" 

if (hours > 17 && hours < 21) { 
greeting = "Good evening!"; 
ampm = "p.m. " ; 
hours -= 12; 



// We consider nine o'clock until midnight "night" 
else if (hours > 20) ( 

greeting = "Good night! " ; 

ampm = "p.m."; 

hours — 12; 



// We want the minutes to display with "0" in front 
// of them if they're single-digit. For example, 
// rather than 1:4 p.m., we want to see 1:04 p.m. 



if (minutes < 10) { 

minutes = "0" + minutes; 

1 



// + is a concatenation operator 

var di spl ayGreeti ng = displayMonth + " " 

+ today. getDate( ) + " , " 

+ today. getYear( ) 

+ " - " + hours + ":" + minutes + " " + ampm 



document .wri t el n(di spl ayGreeti ng) 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 

</HTML> 



The code that you see in Listing 3-4 is a bit long, but understandable when 
you break it down bit by bit. 

First off, the code captures the current date and time in the today variable. 
Then the code calls the getMonth ( ) method associated with the Date object 
to capture the current month (a number between 0 and 11). 



The swi tch statement examines the contents of the month variable and 
assigns an appropriate text string ("January", " Februa ry ", and so on, up 
through "December") to the di spl ayMonth variable. 
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Several if-then statements examine the hours variable to determine the 
appropriate time of day ( " a . m . " or " p . m . ") and the appropriate greeting 

orni ng ! ", "Good afternoon !", "Good eveni ng ! ", or "Good 



The second-to-last statement composes a message called displayGreeting 
and finally, the very last statement writes displayGreetingto the Web 
page. 



The data-qatherinq script 

Gathering information from the folks who visit your Web site is one of the 
more useful things that you can do with JavaScript. In Listing 3-5, 1 show you 
how to combine comments, conditionals, functions, loops, operators, and 
variables into JavaScript statements that capture user input. The statements 
then make calculations based on that input. 

Figure 3-3, Figure 3-4, and Figure 3-5 show you the data-gathering script in 
action. 



Figure 3-3: 

The data- 
gathering 
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users to 
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they want. 
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You ordered 2 shirts: 0 small 1 medium 1 large 
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You can find the code shown in Listing 3-5 on the companion CD. Just load up 

the list0304.htm file. 



Listing 3-5: The Data-Gathering Script 

<HTML> 
<HEAD> 

<TITLE>Data gathering example using a custom functi on</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt"> 

<!-- Hide from browsers that do not support JavaScript 



// The following statements declare variables. 

// = is an assignment operator. 

var article = "a" ; 

var numShirts = 0; 

var smallShirts = 0; 

var medShi rts = 0 ; 

var 1 argeShi rts = 0 ; 



(continued) 
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following is a function declaration, 
cal c_shi rtsCsizeShi rt) { 



// Add 1 to the number of sized shirts ordered, as well 
// as to the number of total shirts ordered 



if (sizeShirt == "S" || sizeShirt == "s") ( 
// ++ is a unary increment operator, 
smal 1 Shi rts++; 
numShi rts++; 

) 

// == is a comparison operator. 

else if (sizeShirt == "M" || sizeShirt == "m") I 

medShi rts++; 

numShi rts++; 

1 



else if (sizeShirt == "L" || sizeShirt == "1") 
1 argeShi rts++; 
numShi rts++; 



// The following is a do-while loop, 
do { 

// The following line of code pops up a JavaScript 
// prompt. 

// The 'answer' variable is set to null if the user 
// clicks 'Cancel ' 

var answer = prompt( "Would you like to purchase " 
+ article 

+ " t-shirt? If so, enter the size (S,M,L) and click OK. When you 
finish, click Cancel", "M") 

// Change 'a' to 'ANOTHER' to make the display message 
// grammatically correct the second (and subsequent) 
// time around, 
article = "ANOTHER" 

if (answer != nul 1 ) { 

calc_shirts(answer) ; 

} 



} 

while (answer != null ) 
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document .wri tel n( "You ordered " + numShi rts + " shirts: 
+ small Shi rts + " sma 1 1 " 
medShi rts + " medium " 
1 argeShi rts + " large"); 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 

</HTML> 



The heart of the script you see in Listing 3-5 is the d o - wh i 1 e loop — the code 
you see in bold. The first line inside the do-whi 1 e loop calls the prompt( ) 
method, which displays the user prompt shown in Figure 3-3. If the user clicks 
Cancel, the answer variable receives a value of nul 1 , and the JavaScript inter- 
preter exits the do whi 1 e loop. 

If the user enters a t-shirt size and clicks OK, however, the answer variable 
receives a non-n u 1 1 value and the d o - w h i 1 e loop calls the c a 1 c_s h i r t s ( ) 
function. 



The cal c_shi rts( ) function uses conditional i f-then statements to calcu- 
late the number of sized shirts (as well as the number of total shirts) ordered. 
Then ca 1 c_shi rts ( ) returns control to the do whi 1 e loop, and the process 
begins all over again, with a call to the prompt ( ) method. Each time the user 
clicks OK, the do whi 1 e loop calls the cal c_shi rts ( ) function. 

When at last the user clicks Cancel, the answer variable receives a value of 
null, and code execution drops out of the dowhi 1 e loop and passes to the 
final JavaScript statement, which constructs a message and writes to the Web 
page by using the w r i t e 1 n ( ) method associated with the document obj ect. 
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Chapter 4 

P JavaScript-Accessible Data: 
Getting Acquainted with the 
Document Object Model 



In This Chapter 

Understanding how object models work 

Exploring properties and methods 

Adding text to a Web page dynamically 

Positioning text on a Web page 

Changing Web page appearance on-the-fly 

Getting familiar with Netscape Navigator's object model 

Getting familiar with Internet Explorer's object model 



70 create powerful scripts, you need to be familiar with two things: 
JavaScript syntax (which I discuss in Chapter 3) and the document 
object model. 

The document object model, or DOM, refers to the Web page components, or 
objects, that you can access and manipulate by using JavaScript. Examples of 
objects that you can work with in JavaScript include the window that a Web 
page appears in, the Web page itself, embedded images and text, and much, 
much more. 

In this chapter, I demonstrate how to find out which objects you can access 
in JavaScript, including those objects' properties and methods. First, I discuss 
the nuts and bolts of the DOM; then, I present three scripts that use document 
objects to change the appearance of a Web page on-the-fly. 
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avaScript is object-based, when you program in JavaScript you get 
to take advantage of a predefined object model. Object-based programming 
languages package, or encapsulate, data and functionality into useful units 
called objects. (Collectively, the objects that you work with in an object-based 
programming language are called the object model.) Encapsulation is a good 
thing because it hides nitty-gritty programming details — allowing you, the 
programmer, to write code with the least amount of hassle possible. 

Human beings tend to think in terms of object models naturally, so object- 
based languages like JavaScript are typically much easier to handle than their 
procedural counterparts. (Examples of procedural languages include BASIC, C, 
and COBOL.) 

Here's a real-world example of an object model. If I tell you my friend Ralph 
works in an office, you might reasonably assume that Ralph has a boss, a few 
co-workers, sits at a desk, and does some kind of work. How do you know all 
this without me telling you? Because you've seen or heard of other offices; 
perhaps you've even worked in one yourself. In other words, you're familiar 
with the office model — so even though you don't know anything about 
Ralph's particular office just yet, you can correctly guess a great deal. In fact, 
all I have to do is fill in a few specific details (the names of Ralph's co-workers, 
what kind of work he does, and so on) for you to have a complete picture of 
how Ralph spends his day. 



The beauty of an object model is that it helps people communicate clearly 
and efficiently. 

JavaScript's object model (called the document object model, or DOM) is no 
exception. Specifically, it helps you clearly and efficiently communicate what 
you want your script to do to the JavaScript interpreter. (The JavaScript 
interpreter is the part of a Web browser that executes a script. You can see 
the JavaScript interpreter in action in Chapter 2.) 

The DOM performs this oh-so-useful task by describing 

All the objects that go into making up a Web page, such as forms, links, 
images, buttons, and text. 

**" The descriptive properties associated with each of the DOM objects. 
For example, an image object can be associated with specific properties 
describing its height and width. 

**" The behaviors, or methods, associated with each of the DOM objects. 
For example, the wi ndow object supports a method called al ert ( ) that 
allows you to display an alert message on a Web page. 
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■ v 0 The special built-in methods, called event handlers, associated with 
automatic and user-initiated events. For instance, loading a Web page 



a browser is considered an event; so is clicking a button. The event 
lers that you use to trigger some JavaScript code when these 
events occur are called on Load and on CI i ck, respectively. 



In the following sections, I give you an in-depth look at each of these four cat- 
egories and how you can use them to create your own powerful JavaScript 
scripts! 

Conceptually, the DOM is the same whether you're viewing a Web page in 
Internet Explorer, Netscape Navigator, or another browser entirely. In prac- 
tice, however, the versions of the DOM implemented for Internet Explorer 
and Netscape Navigator differ — and you must pay attention to these differ- 
ences or risk creating scripts that some users can't view. See "Browser Object 
Models" later in this chapter for details. 



Object*i(/ity 

In nerd-talk, an object is a software representation of a real-world thing. 
Theoretically, any person, place, thing, or can be represented as an object. 

In practice, however, most of the objects that you work with in JavaScript fall 
into the first three of the following four categories: 

Objects defined by using HTML tags. This category includes docu- 
ments, links, applets, text fields, windows, and so on. For the purposes 
of this book, JavaScript scripts are always attached to HTML documents. 
By using JavaScript, you can access any object defined in the HTML 
document to which a script is attached. (To see an example of a script 
accessing HTML objects, check out Listing 4-3 later in this chapter.) 

Objects defined automatically by Web browsers. One example is the 
navigator object, which, despite its name, holds configuration and ver- 
sion information about whichever browser is currently in use, even if 
that browser happens to be Internet Explorer. (To see an example of a 
script accessing a browser object, check out Chapter 3.) 

Objects that are built into JavaScript, such as Date and Number. 
(To see an example of a script accessing built-in JavaScript objects, 
take a look at Chapter 3.) 

Objects you yourself have created by using the JavaScript new operator. 

(To see an example of how you can create and access your own objects 
using JavaScript, check out Chapter 3.) 

Just like their real-world counterparts, software objects are typically associ- 
ated with specific characteristics and behaviors. Because this is a computer 
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topic, though, programmers can't call these bits of information characteristics 
and behaviors. No, that would take all the fun out of it. Programmers call 

fistics properties (or attributes), and they call behaviors methods — 
r certain event-related behaviors whose names begin with on, such 
as oni_oad, on Re size, and onSubmi t. Programmers call these special on 
methods event handlers. 



Properties and attributes are really the same thing, but some JavaScript pro- 
grammers tend to differentiate between the following: 

I Properties (which belong to JavaScript objects) 

Attributes (which are associated with HTML objects) 

Because most of the JavaScript code that you write involves objects, proper- 
ties, methods, and event handlers, understanding what these object-oriented 
terms mean is essential for folks planning to write their own scripts. 



You can think of it this way: 

Objects are always nouns, 
f Properties are adjectives. 

Methods are verbs. 
i>* Event handlers are verbs with on tacked to their fronts. 



Got it? Take a look at Table 4-1 to see examples of some common object 
definitions. 



Table 4-1 




Sample Object Definitions 


Kind of 
Object 


Object 
(Noun) 


Property 
(Adjective) 


Method 
(Verb) 


Event Handler 
("on" + Verb) 


HTML 


burton 


Such as 

name, type, 
and val ue 


cl ick() 


onCl i ck 


HTML 


link 


Such as 

href, port, 
protocol, 
and so on 


(none) 


Such as 

onCl i ck, 
onMouseOver, 
onKeyPress, 
and so on 


HTML 


form 


Such as 

acti on, 
el ements, 
1 ength, 
and so on 


Such as reset( ) 
and submit( ) 


Such as 

onReset and 
onSubmi t 
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Kind of Object Property Method Event Handler 

(Noun) (Adjective) (Verb) ("on" + Verb) 

f Navigator Such as javaEnabl ed( ) (none) 

appVersi on, 
appName, 
1 anguage, 
and pi atf orm 



JavaScript Number Such as toStringC) (none) 

MAX_VALUE 
and MIN_VALUE 



Programmer- 


customer Such as name. 


Such as change- (none) 


defined 


address. 


Address ( ), 




and credi t- 


changeName( ), 




Hi story 


and pi aceOrder( ) 



DropBoo&s 



For sate by owlner: Object properties 

Properties are attributes that describe an object. Most of the objects available 
in JavaScript have their own set of properties. (Appendix C contains a listing 
of JavaScript properties arranged alphabetically.) 

An image object, for example, is usually associated with the properties 
shown in Table 4-2. 



Table 4-2 


Properties Associated with the Image Object 


Image Property 


Description 


border 


The thickness of the border to display around the image, in pixels 


compl ete 


Whether or not the image loaded successfully (true orfalse) 


hei ght 


The height of the image, in pixels 


hspace 


The number of pixels to pad the sides of the image with 


1 owsrc 


The filename of a small image to load first 


name 


The internal name of the image (the one you reference by using 
JavaScript code) 


src 


The filename of the image to embed in an HTML document 


vspace 


The number of pixels to pad the top and bottom of the image with 


wi dth 


The width of the image, in pixels 
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At runtime, all object properties have a corresponding value, whether it's 
explicitly defined or filled in by the Web browser. For example, consider an 
ject created with the HTML code in Listing 4-1. 



Listing 4-1 : Creating an Image Object with the HTML <IMG> Tag 

<B0DY> 

<IMG SRC="myPi cture.jpg" NAME="companyLogo" HEIGHT="200" WIDTH="500" B0RDER="1"> 
</B0DY> 

Assuming that you have a file on your computer named myPicture.jpg, at 
runtime, when you load the HTML snippet into your Web browser and query 
the Image properties, the corresponding values appear as shown in Table 4-3. 

You can query the properties by calling the a 1 e rt ( ) method; for example, 

alert(document. company Logo. src ). 



Table 4-3 Accessing Image Properties 



Property Name Value 



document. company Logo. src 


fi 


1 e: ///C : /my Pi etui 


"e.jpg 


document. company Logo. name 


company Logo 




document . company Logo . hei ght 200 




document . company Logo . wi dtl 


h 500 





document . company Logo . border 1 
document. company Logo. compl ete true 




To see an example of this HTML and JavaScript code in action, take a look at 
the ch4_properti es . htm file located on the companion CD. 



In the code snippets shown in Table 4-3, the name of each object property is 
fully qualified. If you've ever given a friend from another state driving direc- 
tions to your house, you're familiar with fully qualifying names — even if 
you've haven't heard it called that before now. It's the old narrow-it-down 
approach: 

"Okay, as soon as you hit Texas, start looking for the signs for Austin. On the 
south side of Austin, you'll find our suburb, called Travis Heights. When you 
hit Travis Heights, start looking for Sledgehammer Street. As soon as you turn 
onto Sledgehammer, you can start looking for 111 Sledgehammer. That's our 
house." 
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The JavaScript interpreter is like that out-of-state friend. It can locate and 
provide you with access to any property — but only if you describe that 
by beginning with the most basic description (in most cases, the 
jt object) and narrowing it down from there. 



In Listing 4-1, the document object (which you create by using the HTML 
<B0DY> and </B0DY> tags) contains the image called company Logo. The 
companyLogo image, in turn, contains the properties src, name, hei ght, 
width, border, and complete. That's why you type document.company 
Logo.src to identify the src property of the image named company Logo; or 
type document.companyLogo.width to identify the width property; and so on. 



Note, too, that in the HTML code in Listing 4-1, the values for src, name, 
hei ght, width, and border are taken directly from the HTML definition for 
this object. The value of true that appears for the compl ete property, how- 
ever, appears courtesy of your Web browser. If your browser couldn't find and 
successfully load the my Pi cture . j pg file, the value of the complete property 
associated with this object would have been automatically set to f a 1 se. 

In JavaScript as in other programming languages, success is represented by 
true or 1; failure is represented by f al se or 0. 



There's a method to this madness! 

A method by any other name (some programmers call them behaviors or 
member functions) is a function that defines a particular behavior that an 
object can exhibit. 

Take, for example, your soon-to-be-old friend the HTML button. Because you 
can click an HTML button, the button object has an associated method called 
the cl i ck( ) method. When you invoke a button's cl i ck( ) method by using 
JavaScript, the result is the same as though a user clicked that button. 

Unlike objects, properties, and event handlers, methods in JavaScript are 
always followed by parentheses, like this: cl i ck( ). This convention helps 
remind programmers that methods often (but not always) require parameters. 
A parameter is any tidbit of information that a method needs in order to do 
its job. For example, the al ert( ) method associated with the wi ndow object 
allows you to create a special kind of pop-up window (an alert window) to 
display some information on the screen. Because creating a blank pop-up 
window is pretty useless, the a 1 e rt ( ) method requires you to pass it a param- 
eter containing the text that you want to display: 

function checkTheEmailAddress 0 I 

window, al ert( "Sorry , the e-mail address you entered is not complete. Please 
try again.") 

) 
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Some objects, like the built-in wi ndow object, are associated with scads of 
methods. You can open a window by using the open ( ) method; display some 
window by using the write ( ) and wri tel n ( ) methods; scroll a 
p or down by using the scroll ( ), scroll By (), and scrol 1 To( ) 
methods; and so on. 



Just as you do when referring to an object, a property, or an event handler, 
when you refer to a method in JavaScript you must preface that method with 
the specific name of the object to which it belongs. Table 4-4 shows you 
examples of how to call an object's methods. 



Table 4-4 Calling Object Methods 



JavaScript Code Snippet 


What It Does 




annoy i ngText . bl i n k( ) 


Calls the bl ink( ) method assoc 
the stri ng object. Specifically, il 
the string object called annoyi n 
blink on and off. 


ated with 
causes 

gText to 


sel f . f ramel . focus ( ) 


Calls the focus ( ) method associated with 
the frame object. Specifically, it sets the 
inputfocustoaframe called framel 
(which itself is associated with the primary 
document window). 


document . i nfo Form . request Calls the cl i ck( ) method associated with 
ForFreelnfoButton.clickO the button object. Specifically, this code 

clicks the button named requestForFree 
InfoButton, which is contained in the 
form called i nf oForm. (The i nf oForm 



form is contained in the primary HTML 
document.) 



Why use methods? 



Many of the methods defined in JavaScript's 
DOM are things that users can do simply by 
clicking a mouse: for example, stopping a 
window from loading (the stop() method); 
focusing on a particular input field (the focus ( ) 
method); printing the contents of a window (the 
pri nt ( ) method); and so on. Why go to the 
trouble of including method calls in your script? 



In a word, automation. Say you wantto create a 
Web page that does several things in response 
to a single event. For example, when a user 
loads your Web page, you might want to set 
focus to a particular input field, open a small 
What's New window, and display today's date 
automatically. By using methods, you can do all 
this — and the user doesn't have to do a thing! 
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To see an example of a method call in JavaScript, take a look at the 
ch3_methods . htm file located on the companion CD. 

nother example of methods in action in Chapter 2, and Appendix C 
lists the methods that are available to you in JavaScript's DOM. 

Hoti do you handle a hungry e</ent? 
With event handlers! 

An event handler is a special kind of method that a JavaScript-enabled Web 
browser triggers automatically when a specific event occurs. Event handlers 
give you, the JavaScript programmer, the ability to perform whatever instruc- 
tions you like — from performing calculations to displaying messages — 
based on events such as 

A user loading a Web page into a browser 
u* A user stopping a Web page from loading 

A user entering or changing some information in an input field 

A user clicking an image, button, or link 
i>* A user submitting or resetting a form 

For example, when a user loads a Web page into a browser, the on Load event 
handler associated with that page (or document) executes; when a user clicks 
an HTML button, that HTML button's onCl i ck event handler executes; and 
so on. 

Here's an example of how you call a built-in event handler: 

<B0DY 

onLoad="window.al ert( 'Hello!');" 
onlln 1 oad=" window. a lert( 'Goodbye! ' ) ;" 

> 

</B0DY> 

To see an example of calling event handlers in JavaScript, check out the 
c h 3_e vents.htm file located on the companion CD. 

Take a look at the code snippet in this section. Two event handlers are asso- 
ciated with the document object. (The document object is defined in HTML 
using the <B0DY> and </B0DY> tags.) One of the event handlers is named 
on Load; the other, onUnl oad. 

As you might guess, loading this code into a Web page causes a Hel 1 o ! 
message to appear. Loading another page, or closing the browser altogether, 
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causes a Goodbye ! message to appear. Event handling is a wonderful thing. 
With it you can figure out when and precisely how a user interacts with any 
ur Web page, and you can respond to that action as you see fit. 



Appendix C contains a list of all the event handlers that JavaScript supports. 
To see additional examples of JavaScript event handlers in action, check out 
Chapter 2. 



Company functions 

Like methods, functions are behaviors — but that's where the similarity ends. 

Iv 0 Functions are standalone bits of JavaScript code that can be reused over 
and over again. 
Unlike methods, functions aren't associated with a particular object. 

The JavaScript language provides a handful of built-in functions, but you can 
create your own, as well — as many as you need. 

Here's an example. Say you want to create an HTML form that asks the user to 
enter her age and the number of pets she owns. You could create a JavaScript 
function that examines a number and makes sure that it's between certain rea- 
sonable parameters — say, 0 and 100. After you create such a function, you can 
call it twice: once to validate the age that the user types in and once to validate 
the number of pets the user owns. This ability to create reusable functions can 
save you quite a bit of time if you plan to create a lot of JavaScript-enhanced 
Web sites. 

Listing 4-2 shows you how you define and use a function in JavaScript. 



Listing 4-2: Defining and Calling a Custom Function in JavaScript 

<SCRIPT LANGUAGE="JavaScri pt"> 
function checkNumber(aNumber) { 

if (aNumber > 0 && aNumber < 100) ( 

//////////////////////////////////////////////////// 
// If the number is greater than 0 and less than 
// 100, pop up a "congratulations" message and return 
// a value indicating success. 

//////////////////////////////////////////////////// 

alertC'The number you specified is valid (it is between 0 and 100).") 
return true 

) 
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1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

II Otherwise, the number is negative or over 100, 
o return a value indicating failure. 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 



el se { 

alertC'The number you specified is invalid (not between 0 and 100). 
\nPlease try again. " ) 

return false 



<F0RM NAME="myForm"> 



Please type in a number: < I N PUT TYPE="text" S I Z E = " 5 " NAME="inputNumber"> 

<INPUT TYPE="button" VALUE=" Push to validate number" 

onCl i ck=" checkNumber (document. my Form. inputNumber.val ue) ; "> 

</F0RM> 

Don't worry if you see some unfamiliar symbols inside the checkNumber( ) 
function definition, like > and &&; you find out what these symbols mean in 
Chapter 3. 

To see the checkNumber( ) function example in action, check out the file 
ch3_f uncti ons . htm located on the companion CD. 

For now, take a look at the penultimate line in the code snippet, the one 
where the checkNumber ( ) function is being called: 

<INPUT TYPE="button" VALUE=" Push to validate number" 

onCl i ck=" checkNumber (document .my Form. i nput Number . val ue) ; "> 

Notice that checkNumber ( ) is being called with a single argument (document . 
my Form . i nputNumber .val ue)? That single argument represents the number 
that a user typed into the HTML form. ("For sale by owner: Object properties," 
earlier in this chapter, explains why you must fully qualify a property this way.) 
When a user clicks the Push to Validate Number button, the checkNumber( ) 
function then 

1. Springs into action 

2. Takes a look at the input number passed to it 

3. Pops up a message telling the user whether the number is valid (that is, 
whether the number falls inside the range of 0 to 100) 

Because functions are so useful in JavaScript, you see lots of examples of 
them in this book. For now, just remember that 



Part I: Building Killer Web Pages for Fun and Profit 



v 0 You define a function inside the <SCRI PT> and </SCRI PT> tags, which I 



p Books 



explain in detail in Chapter 2. 



let the JavaScript interpreter know a function declaration is coming 
tarting it with the special JavaScript keyword f uncti on, followed by 
a pair of curly braces { ) . 

Between the curly braces you put any JavaScript statements you like. 

Appendix C lists a handful of built-in JavaScript functions. For additional 
examples of creating and calling your own functions, see Chapter 2. 



Anatomy of an Object: Properties, 
Methods, Event Handlers, 
and Functions in Action 

In this section, I demonstrate how to work with the most commonly used 
objects in JavaScript to perform three cool interactive effects: 

Adding text to a Web page dynamically 
Positioning text on a Web page dynamically 

Changing other aspects of Web page's appearance (background, text 
color, and so on) on-the-fly 

Because these particular examples use cascading style sheets, or CSS, to per- 
form their magic — a common (and highly useful) approach referred to as 
dynamic HTML, or DHTML — I first describe cascading style sheets and how 
you use them in JavaScript. 

Dynamic objects: The least you need 
to know about CSS and DHTML 

If you've ever tried to make the text on your Web page look spiffy by using 
plain old HTML, you might have been sorely disappointed. Why? Because 
HTML was designed to allow you to add content to your Web page — not to 
control precisely how that content is represented. 



Recognizing the need for a way to control Web page layout, the good folks at 
the World Wide Web Consortium came up with a standard called cascading 
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style sheets, or CSS. And fortunately, browser makers took heed: Both 
Navigator and Internet Explorer support CSS. 



s you to describe how you want the text elements on your Web 
page to appear. For example, you might decide you want all level-one head- 
ings to appear in blue, all level-two headings to appear in red, and every 
other paragraph to be italicized. To accomplish this goal, you simply 

Add special CSS descriptors to your HTML code. 
I V Reference your special CSS descriptors by using JavaScript. 

The combination of CSS and a scripting language is often referred to as DHTML. 

CSS is a fairly broad topic. This book is devoted to JavaScript, so I don't go 
into the nitty-gritty details of CSS here. Instead, in the following sections I 
give you the nuts-and-bolts information that you need to create CSS objects 
and access those objects by using JavaScript. For an in-depth look at CSS, I 
suggest a book such as Cascading Style Sheets by Example, by Steve Callihan 
(Que). Or check out the World Wide Web Consortium's cascading style sheets 
specification by pointing your browser to www.w3.org/Style/CSS. 



defining CSS objects 

When it comes to defining CSS objects, you have two choices: 

V Associate a style with an HTML tag by using the HTML <STY LE> tags. 
Here's an example: 

<HTML> 
<HEAD> 

<STYLE TYPE="text/css"> 

HI {color: red ; ) 
</STYLE> 

</HEAD> 

<B0DY> 

<Hl>This heading is red! </Hl> 

<H2>This heading is plain old black</H2> 

</B0DY> 

</HTML> 

This code associates the color red with every occurrence of the <H1> 
tag that appears in the body of the document. 

v 0 Define a custom-named CSS object by using the ID property of another 
HTML tag. For example: 

<HTML> 
<HEAD> 

< STY LE TYPE="text/css"> 
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#blueHeading {color: blue;) 

</STYLE> 

<^HEAD> 

©DY> 

ID="bl ueHeading">My blue headi ng<Hl> 




In this case, the name of the CSS object is bl ue Headi ng — and you can 
easily use this name to access the CSS object using JavaScript. This is 
the approach I demonstrate in the example scripts that you find in this 
chapter. 

No matter how you define CSS objects, you can access those objects by using 
JavaScript and the DOM. To minimize the amount of CSS expertise you need — 
this is a book on JavaScript, after all — I demonstrate the second approach. 

Accessing CSS objects by using JavaScript 

After you define a CSS object, you can access that object by using JavaScript. 
The following code shows you how: 



document. getEl ementByld ( "blueheading").style. f ontSty 1 e=" italic"; 



The JavaScript code you see here uses the getEl ementById( ) method to set 
the f on t Sty 1 e property of the blueheading element to italic — effectively 
displaying the heading in italics. 

In addition to the f ontSty 1 e property, you can access a variety of CSS prop- 
erties (such as background-color, background-image, font-weight, font-size, 
text-align, text-indent, and much more) using a variety of methods. 

In the example scripts that you find in the next three sections, I introduce 
you to several different CSS properties and methods. For an ultracomplete 
list, however, consult your favorite browser's DOM reference. (One good 
online reference is http://msdn.microso ft. com/li bra ry /default. 
asp?url=/workshop/author7dhtml /reference/objects. asp.) 



Example DHTML script: Adding 
text dynamically 

Using plain HTML, what you see is what you get: When the text for a page is 
loaded, that's the text the user sees. Not so when you add JavaScript and CSS to 
the mix! Using this powerful combination, you can create a script that adds or 
changes the appearance of text on a Web page after that page has been loaded. 

To see what I mean, take a look at Figures 4-1, 4-2, and 4-3. 
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Figure 4-1: 

This Web 
page lets 
users 
display (or 
hide) the 
first two 
paragraphs. 



I 
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1. This is the first paragraph. By taking advantage of cascading style sheets, you can assign unique IDs to all sorts of document 
elements: not just paragraphs, but headings, lists, styles - virtually any document element. And once you have a unique ID 
assigned to a document element, you can display or hide that document element using a coding technique similar to the one 
shown here. 

2 This is the second paragraph. 

3. This is the third paragraph. You can dynamically change the content this paragraph contains by entering your own text in the 
form field below. 

You can choose to display or hide the paragraphs on this page 
dynamically using the checkboxes below. You can also choose to change 
paragraph #3. 

0 Display first paragraph 
0 Display second paragraph 



Change third paragraph 



Click to change text 



6] Done 



] 506331 ChO... 1 Iff] leftovers J., , ' H" TextPad - [.., 



'3 Adding text... 
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Figure 4-2: 

Deselecting 
the second 
check box 
causes the 
second 
paragraph to 
disappear. 
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1. This is the first paragraph. By taking advantage of cascading style sheets, you can assign unique IDs to all sorts of document 
elements: not just paragraphs, but headings, lists, styles - virtually any document element. And once you have a unique ID 
assigned to a document element, you can display or hide that document element using a coding technique similar to the one 
shown here. 



3. This is the third paragraph. You can dynamically change the content this paragraph contains by entering your own text in the 
form field below. 

You can choose to display or hide the paragraphs on this page 
dynamically using the checkboxes below. You can also choose to change 
paragraph #3. 

0 Display first paragraph 
□ Display second paragraph 

Change third paragraph 



Click to change text 



&\ Done 



J My Computer 



j leftovers J... \ TextPad - [. . . 



3j Adding text.. 
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Figure 4-3: 

Replacing 
the third 
paragraph 
with the 
user- 
supplied 
text. 
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1. This is the first paragraph. By taking advantage of cascading style sheets, you can assign unique IDs to all sorts of document 
elements: not just paragraphs, but headings, lists, styles - virtually any document element. And once you have a unique ID 
assigned to a document element, you can display or hide that document element using a coding technique similar to the one 
shown here. 



Now is the time for i 



i citizens to come to the aid of their country. 



You cun choose to display or hide the paragraphs on this page 
dynamically using the checkboxes below. You can also choose to change 
paragraph #3. 

0 Display first paragraph 
□ Display second paragraph 

Change third paragraph 



Now is the time tor all good citizens to c | Clickto changetext 



6] Done 



j My Computer 



] 506331 ChO.., j iQleftoversJ.,. ' TextPad - [•■ 
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To see the code responsible for Figures 4-1, 4-2, and 4-3, take a look at 
Listing 4-3. 




You can experiment with the example script you find in Listing 4-3 by loading 
the file 1 i st0403 . htm s which you find on the companion CD. 



Listing 4-3: Allowing a User to Add or Change Text Dynamically 
on a Web Page 

<HTML> 
<HEAD> 

<TITLE>Adding text dynami cal ly</TITLE> 

<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 

<!-- Hide from browsers that do not support JavaScript 

function displayTextO { 

// Store the heading elements in local variables 
// so we can work with them easily 
var firstGraf = document .getEl ementByldt "grafl" ) ; 
var secondGraf = document .getEl ementById( "graf 2 " ) ; 
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// If grafl is selected, change visibility to visible; 
// if grafl is NOT selected, change visibility to hidden 

raf . style. vi sibil ity=(document.myForm. graf Ibox. checked) ? "visible" 
"hidden" ; 



// if graf 2 is selected, change visibility to visible; 
// if graf 2 is NOT selected, change visibility to hidden 
secondGraf . style. vi sibil ity=( document. my Form. graf 2box. checked) 1 "visible" 
"hidden" ; 



function changeTextO { 



// Store the new text in a variable called newText 
var newText = document. myForm.changeableText. value; 

// Get the existing element text and store it in 
// "oldText" 

var oldText = document .getEl ementById( " g r a f 3 " ) ; 

// Swap old text with new text. 
// Replace oldText with newText 
oldText. firstChild.nodeValue = newText; 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 

<B0DY> 



// Defining three named paragraphs 

<P I D=" graf 1 " >1 . This is the first paragraph. By taking advantage of cascading 
style sheets, you can assign unique IDs to all sorts of document elements: not 
just paragraphs, but headings, lists, styles - virtually any document element. 
And once you have a unique ID assigned to a document element, you can display or 
hide that document element using a coding technique similar to the one shown 
here.</P> 

<P I D= " g r a f 2 " >2 . This is the second paragraph . </P> 

<P I D= " g r a f 3 " >3 . This is the third paragraph. You can dynamically change the 
content this paragraph contains by entering your own text in the form field 
below. </P> 



<H2>You can choose to display or hide the paragraphs on this page dynamically 
using the checkboxes below. You can also choose to change paragraph #3.</H2> 



(continued) 
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Listing 4-3 (continued) 



<f ORM nai 
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me="myForm"> 

isplayTextO function is called when the user checks or unchecks the 
box. 



<INPUT TYPE="checkbox" NAME="graf Ibox" CHECKED onClick="displayText();"> 
Display first paragraph 
<br> 

<INPUT TYPE="checkbox" NAME="graf 2box" CHECKED onClick="displayText();"> 
Display second paragraph 

<br><br> 

Change third paragraph 
<br> 

<INPUT TYPE="text" NAME="changeabl eText" defaul tVal ue="Type here" SIZE="35"> 

// The changeTextO function is called when the user clicks the "Click to change 
// text" button. 

<INPUT TYPE="button" VALUE="Click to change text" onClick="changeText();"> 

</F0RM> 



</B0DY> 
</HTML> 



The code in Listing 4-3 defines three CSS paragraphs named graf 1, graf2, 
and graf 3, respectively. When a user selects one of the HTML check boxes, 
the di spl ayText( ) function is called. The di spl ayText( ) function changes 
the visibility property associated with g r a f 1 and g r a f 2 to display (or 
hide) each paragraph according to the user's selection. 

When the user enters text in the text field and clicks the Click to Change Text 
button, the JavaScript interpreter calls the changeText( ) function. The 
changeText ( ) function uses DOM methods to access paragraph text and 
replace that text with the user-supplied text. 



Example DHTML script: Positioning 
text dynamically 

You can change the way Web page elements are positioned at runtime by 
using a combination of JavaScript and CSS. 

To accomplish this task, you first create named elements by using CSS; then, 
you access and move those elements by using JavaScript. Figures 4-4 and 4-5 
show you an example of a text element that can be moved in response to a 
user's clicking a button. 
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i£j Positioning content dynamically - Microsoft Internet Explorei 
File Edit View Favorites Tools Help 
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Move left Move right Move up Move down 



This is a positionable layer 



Figure 4-4: 

Atthe click 
of a button, 
this text 
element can 
be moved 
left, right, 
up, or down. 



- Done 
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| DC-s prompt 



J My Computer 



j|j Positioning content dynamica lly - Microsoft Internet Explorei 



File Edit View Favorites Tools Help 
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Move left I Move right Move up Move down 



This is a positionable layer. 



Figure 4-5: 

Clicking the 
Move Left 
button 
moves the 

text element 
to the left. 



■£] Done 
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You can experiment with the example script you find in Listing 4-4 by loading 
the file 1 i st0404 . htm you find on the companion CD. 

^^sj^^^cim through the code in Listing 4-4, pay particular attention to the 
HTML < D I V > tag and the JavaScript m o v e ( ) function. 



Listing 4-4: Allowing a User to Change the Position of a Web Page 
Element 

<HTML> 
<HEAD> 

<TITLE>Posi ti oni ng content dynamical ly</TITLE> 
<SCRIPT LANGUAGE=" JavaScri pt" TY P E= " t ext / j a va s c r i pt"> 
<!-- Hide from browsers that do not support JavaScript 



function move(direction) ( 



var layerText = document . getEl ementById( "myLayer" ) ; 



swi tch ( di recti on ) I 

// If moveO is called with an argument of "left," reposition text 
// layer so that it is now 50 pixels from the left-hand side of the 
// window. 



case "left": 

1 ayerText . styl e . 1 eft = 50 ; 
break; 



case "right": 

layerText. style. left = 150; 
break; 



case "up": 

layerText. style. top = 50; 
break; 



case "down": 

layerText. style. top = 150; 
break; 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 
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<DIV ID=" 



<B0DY> 

ng a CSS layer object named myLayer and positioning it 100 pixels from 
op of the window and 100 pixels from the left-hand side of the window. 



"myLayer" STYLE="position:absolute; 1 eft : 100 ; top:100;"> 
<P>This is a positionable layer. </P> 
</DIV> 



<F0RM> 

// Clicking any of the four buttons calls the moveO function with a different 
// argument. 

<INPUT TYPE="button" NAME="moveLayer" VALUE="Move left" onCl i ck="move( ' 1 eft ' ) ; "> 
<INPUT TYPE="button" NAME="moveLayer" VALUE="Move right" 

onCl i ck="move( 'right');") 
< I N PUT TYPE="button" NAME="moveLayer" VALUE="Move up" onCl i ck="move( ' up' ) ; "> 
< I N PUT TYPE="button" NAME="moveLayer" VALUE="Move down" onCl i ck="move( 'down ' ) ; "> 



</F0RM> 



</B0DY> 
</HTML> 



In the example code you see in Listing 4-4, a positionable layer is created and 
displayed on-screen by using the HTML <DI V> tag. When a user clicks one of 
the buttons — say, the Move Left button — the JavaScript interpreter calls 
the move ( ) function, passing in the value left. 



Inside the move( ) function, the JavaScript interpreter first identifies the posi- 
tionable layer by name, and then it uses the switch conditional statement to 
determine which direction to move the layer. 



Example DHTML script: Changing page 
appearance on*the*fly 

Here you find out how to change overall Web page characteristics such as 
background and text color. First, take a look at Figures 4-6 and 4-7; then, take 
a peek at the code in Listing 4-5. 
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Changing pane appearance on the fly with DHTML Microsoft Internet Explorer 
File Edit View Favorites Tools Help 
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Figure 4-6: 

This Web 
page offers 
users a 
choice of 
themes. 



I 
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Choose a theme: 



Using DHTML (a combination of JavaScript and cascading style sheets) you can let your users change the way your Web 
pages appear. 

Theme! v| 



Theme 1 

Theme 2 
Theme 3 



6] Done 



'3 Changing p 



| DOS Prompt 



J My Computer 



Figure 4-7: 

Choosing 
a theme 
background, 
paragraph, 
and heading 
text color. 



S] ChantjiiKj pane appearance on-the-fly with DHTML Microsoft Internet Explorer 
File Edit View Favorites Tools Help 
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C hoose a theme: 



Using DHTIML (a combination of JavaScript and cascading style sheets) you can let your users chanse (he way 
your Web pages appeal 



^] Done 
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You can experiment with the example script that you find in Listing 4-5 by 
loading up the file 1 i st0405 . htm you find on the companion CD. 




-5: Using DHTML to Change Page Appearance on-the-Fly 



<HTML> 
<HEAD> 

<TITLE>Changi ng page appearance on-the-fly with DHTML</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from browsers that do not support JavaScript 

function changeTheme( ) { 

swi tch ( document .my Form. themes .sel ected Index) ( 
case 0: 

// Changing the background and foreground (text) color, 
document. bgColor = "blue"; 
document. fgColor = "yellow"; 

// Changing the heading color, 
document .get El ementById( "headi ngl" ) .styl e.col or=" pi nk" ; 
break; 

case 1: 

document. bgColor = "pink"; 
document. fgColor = "green"; 

document .get Element By Id ( "headi ngl" ) .styl e.col or=" red" ; 
break; 

case 2: 

document. bgCol or = "green"; 
document. fgColor = "red"; 

document . get El ementById( "headi ngl" ) .styl e.col or=" pi nk" ; 
document . getElementByldt "graf 1" ) . styl e . fontWei ght="bold" ; 
break; 

) 

1 

// --> Finish hiding 

</SCRIPT> 

</HEAD> 

<B0DY> 

// Creating a named heading element. 
<H1 ID="headingl">Choose a theme:</Hl> 
// Creating a named paragraph element. 

<P ID="grafl">Using DHTML (a combination of JavaScript and cascading style 

sheets) you can 
let your users change the way your Web pages appear. </P> 



(continued) 
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Listing 4-5 (continued) 



1-^ <I0RM NAI 

pBOQlS; 



NAME="myForm" > 

a user selects a new theme, the changeTheme( ) function is called. 
'name="themes" onChange="changeTheme( ) ; "> 
<option val ue="themel">Theme K/option> 



<opti on val ue="theme2">Theme 2</option> 
<opti on val ue="theme3">Theme 3</option> 

</select> 
</F0RM> 

</B0DY> 
</HTML> 

As you glance over the code in Listing 4-5, notice that two CSS objects are cre- 
ated in the body of the document: h e a d i n g 1 and g r a f 1 . When a user selects a 
theme, the JavaScript interpreter calls the changeTheme ( ) function, which uses 
the switch conditional statement to determine which theme the user selected. 



The appearance of the page — the background color, foreground color, heading 
color, and font weight of the paragraph text — is set based on which theme 
the user selected. 



Browser Object Models 

Conceptually, Web pages are all the same: They're displayed in browser win- 
dows, contain text and images, and so on. And, in fact, the World Wide Web 
Consortium (the W3C), an industry group responsible for many Web-related 
standards, has hammered out a standard document object model — a blue- 
print, if you will, that browser manufacturers can follow. (You can find a copy 
of the W3C's DOM specification at www.w3.org/D0M.) 

In reality, however, each browser manufacturer performs slightly different 
behind-the-scenes magic when it comes to implementing the DOM (and pro- 
viding JavaScript support). What this means is that the browser models you 
work with in JavaScript — Microsoft's Internet Explorer DOM and Netscape's 
DOM — are similar but not identical. 



Netscape Natfiqator 

Netscape Navigator's DOM describes all the objects you can access in 
JavaScript to create cool scripts that execute flawlessly in Netscape 
Navigator. 
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matter he 



When you want to reference any of the following objects in your script, you 
use that object's fully qualified name, as shown in the Syntax column of the 

list. The wi ndow object is the only exception to this rule. By default, 
b page contains one all-encompassing, granddaddy window, no 
matter how many additional windows you choose to include. Because this 
overall window is a given, you don't have to mention it specifically when you 
refer to one of the objects that it contains. 



For example, the following two JavaScript code snippets both set the s rc 
property of an Image object named my Image equal to " happy cat . j pg": 



wi ndow. document. my Form. my Image. src="happycat . jpg" 



document .my Form. my Image . src=" happy cat . jpg" 



The following is a short list of the basic objects that you work with in 
Netscape Navigator. You can find a list of all the objects in the DOM imple- 
mentation for Navigator 7.1, including associated properties, methods, and 
event handlers, in Appendix C. Or check out Netscape's exhaustive DOM ref- 
erence at www .mozi 11a. org/docs/dom/domref /dom_shortTOC . html . 



Object Syntax 

window window (optional) 

document document 

applet document.applets[0] 

anchor document.som&4nc/7or 

area document.some.4rea 

classes document.classes 



n 


document.someform 


button 


documentsomeForm.someButton 


checkbox 


documentsomeForm.someCheckbox 


fileUpload 


document. someForm. someFileElement 


hidden 


document. someForm. someHidden 


image 


documentsomeForm.somelmage 


password 


document. someForm. somePassword 


radio 


document.someForm.someRadio 


reset 


document. someForm. so me Reset 


select 


document. someForm. so me Select 


submit 


document. someForm. someSubmit 


text 


document. someForm. some Text 


textarea 


documentsomeForm.someTextarea 


ids 


document.ids 


layers 


document.layers 


link 


document.so/77eZ./M 



(continued) 
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Object 



Syntax 
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object 
plugin 
tags 

frame, parent, self, top 
history 
location 
locationbar 
menubar 



documentsomeObject 

docment.embeds[0] 

document.tags 

(all of these are also synonyms for window) 

history 

location 

locationbar 

menubar 



navigator 
personalbar 
scrollbar 
statusbar 
toolbar 



navigator 

personalbar 

scrollbar 

statusbar 

toolbar 



JavaScript data types 

Much of what you want to do with a JavaScript script involves programmer- 
defined objects, such as the values that a user types into your HTML form, 
some calculations that you make based on those values, and so on. 

Most programming languages require you to declare special placeholders, 
called variables, to hold each piece of data you want to work with. Not only 
that, but most programming languages require you to specify — up front — 
what type of data you expect those variables to contain. (This requirement 
makes it easy for those languages' compilers but tough on us programmers!) 

JavaScript expects you to declare variables to represent bits of data, too. But 
because JavaScript is a loosely typed language, you don't necessarily have to 
declare the type of a variable up front, nor do you have to perform cumber- 
some type conversions the way you do in languages like C and C++. Here's an 
example: 



var 


visitor 




// 


Defines a variable called "visitor" of 








// 


no particular type 


var 


visitor = 


"george" 


// 


Resets "visitor" to a text string 


var 


visitor = 


3 


// 


Resets "visitor" to a numeric value 


var 


visitor = 


null 


// 


Resets "visitor" to null 



You can get away without specifying string or numeric data types explicitly, 
as shown in this code snippet, because the JavaScript interpreter takes care 
of figuring out what type of value is associated with any given variable at 
runtime. 
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sfct^sr^ There are two data types that JavaScript requires you to explicitly specify: 
A ' the A r r a y and Date data types . You must declare variables of type Array 

g explicitly because the JavaScript interpreter needs to know certain 
)ails about these types of values in order to store them properly 



tne a r 



JavaScript supports the following data types: 



Array An ordered collection. For example: 

var animals = new ArrayC'cat", "dog", "mouse") // 
load array 



var firstAnimal 
el ement 



animals[0] // access first array 



var secondAnimal = animals[l] // access second element 

var thirdAnimal = animals[2] // access third element 
i>* Bool ean True/false data type (values of true or f al se only). For example: 

var cooki eDetected = false 

var repeatVisitor = true 
f Date Time and date data type. For example: 

var today = new DateO // current time/date via 



system clock 

var newYearsDay 
date 



new Date(2001, 01, 01) // specific 



null A special data type denoting nonexistence. For example: 

if (emai 1 Address == null) { // check for null 
al ert ( " PI ease enter an e-mail address") 

) 

Null is not the same as 0 (zero), 
f Number Numerical data type. For example: 

var numberHits = 1234 // implied numeric data type 

var numberHits = new Number(1234) // explicit 

**" String String (text) data type. For example: 

alertC'This is a string") // implied string with 
double quotes 

alert('So is this') // implied string with single 
quotes 



var myString 
expl i ci t 



new StringC'Yet another string") // 
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± JavaScript supports additional data types, including the Function and RegExp 
"~ ' "" data types. Because these data types aren't often used, I don't describe them 
I details on how to use these data types, check out http://devedge. 
! . c om /I i bra ry /manuals /2000/ j a vascript/1.5/guide. 




aaia types 



Leftovers; The Math object 

JavaScript provides a utility object for you to use in your script endeavors. 
This object — the Math object — isn't part of the DOM proper (that is, it 
doesn't represent a conceptual component of a Web page). It isn't a data 
type, either. It's simply a standalone object provided for you to use whenever 
you need mathematical constants or functions. Here are a few examples: 

var x = Math. PI // assigns "x" the value of pi 

var y = Math. round( 158.32) // assigns "y" the result of rounding 158.32 

var z = Math . sqrt ( 49 ) // assigns "z" the square root of 49 

Check out Appendix C for a full list of all the properties and methods associ- 
ated with the Math object. 



Microsoft Internet Explorer 

Microsoft's document object model is often referred to as the DHTML DOM, 
which is alphabet-soup-ese for dynamic Hypertext Markup Language document 
object model. Although Microsoft's DHTML DOM is based on the same standard 
that Netscape Navigator's is based on — the World Wide Web Consortium's 
DOM specification — it varies a bit from Netscape's implementation. This 
variation is important to keep in mind because if your script references objects 
that exist in one DOM and not another, your script will run in just that one 
object-supporting browser. (Flip to Chapter 5 to find tips for creating cross- 
platform scripts that work in both browsers.) 

Microsoft's DHTML DOM describes all the objects you can access with 
JavaScript to create cool scripts that execute flawlessly in Internet Explorer. 
The following is a short list of the basic objects that you work with in Internet 
Explorer. 



Object 


Syntax 


window 


window (optional) 


document 


document 


applet 


document.applets[0] 


anchor 


document.some4/7c/7or 


area 


do c u m e nt. so me Area 
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UUjClrl 


vjrfflCUl 


form 


documentsomeForm 


\ L^Oputton 


documentsomeForm.someButton 


' ^■'checkbox 


documentsomeForm. someCheckbox 


file 


documentsomeForm. someFileElement 


hidden 


documentsomeForm. someHidden 


image 


documentsomeForm. somelmage 


password 


documentsomeForm. somePassword 


radio 


document, so me Form. so me Radio 


reset 


documentsomeForm. so me Reset 


select 


documentsomeForm. someSelect 


submit 


documentsomeForm. so me Submit 


text 


document. someForm. some Text 


textarea 


documentsomeForm. some Textarea 


link 


documentsomeLink 


object 


documentsomeObject 


plugin 


document.embeds[0] (no, this isn't a typo!) 


embed 


document.embeds[0] 


frame 


someFrame 


frameset 


someFrameset 




rusiory 


rusiory 


location 


location 


navigator 


navigator 



clientlnformation 



clientlnformation 



You can find a list of the objects in the DOM implementation for Internet 
Explorer 6.0, including associated properties, methods, and event handlers, 
in Appendix C. Or check out Microsoft's own exhaustive DHTML DOM refer- 
ence at 

http: //msdn.mi crosoft.com/workshop/author/dhtml /reference /objects .asp 
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In this part . . . 

m n this part, you find practical ways to create Web pages 
*S that appear differently to different users. Chapter 5 
shows you how to modify the way your pages appear auto- 
matically based on which browser your users are running. 
Chapter 6 describes how you can create Web pages that 
remember visitors, and Chapter 7 demonstrates how to 
manipulate browser frames and windows to create sophis- 
ticated navigational schemes. 

Best of all, you see real working examples of all the tech- 
niques presented in Part II. (The examples are also included 
on the CD-ROM at the back of this book, so you don't even 
have to type the code.) 



Chapter 5 

detecting Your Users' Browser 
Environments 



In This Chapter 

Understanding how (and why) JavaScript support differs among browsers 
Applying strategies for cross-platform script creation 

Taking advantage of advanced JavaScript features with a browser-detection script 



The biggest challenge facing Web developers today isn't hardware- or 
software-based: It's wetware-based. (Wetware — a term that refers to the 
supposed squishiness of the human brain — is geek-speak for human beings.) 
And that challenge is trying to get the companies that create Web browsers 
to agree on a single, standard implementation of browser-supported tech- 
nologies like JavaScript! 

With the current situation, the brand of browser that someone has installed, 
the browser's version, and the underlying operating system all affect that 
person's ability to view your JavaScript-enabled Web pages. As a JavaScript 
developer, you need to be aware of the differences in JavaScript implementa- 
tions among browsers and write your scripts accordingly. If you don't, you 
might end up creating a whiz-bang script that runs only on your computer. 

Whacking \lour Way through 
the Browser Maze 

From the latest reports, both Microsoft and Netscape have promised to sup- 
port the ECMAScript standard (which I discuss in detail in Chapter 3) in 
future versions of their respective browsers. 
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Even if Internet Explorer and Netscape Navigator were fully ECMAScript- 
compliant (and offered no additional features), the same JavaScript script 
■*ti|l>night not execute identically in both browsers. Why? For JavaScript to 
Jfe|cj^^j^ cross-browser language, both the syntax and the document object 
model (DOM) would have to be consistent. 



ECMA-262 takes JavaScript halfway to cross-browser nirvana by defining a 
standard language specification, but it doesn't define the DOM. As you see in 
Chapter 4, the DOMs for the two browsers are far from identical, despite the 
efforts of the World Wide Web Consortium to define a unified standard. 



Fortunately, as you see in the next section, you don't have to depend on dif- 
ferences between JavaScript implementation and object models to write 
great cross-browser scripts. All you need to do is identify the differences at 
runtime and display customized Web pages accordingly. 



Detecting Features 

By using JavaScript, you can detect what make and version of Web browser a 
user is using to view your pages — useful information that lets you customize 
Web pages on-the-fly to provide your users with the best possible viewing 
experience. But make and version aren't the only bits of browser-related 
information that you can detect by using JavaScript. You can also determine 
which Java applets and browser plug-ins a user has installed, which Web 
page your user visited directly before surfing to yours (called the referring 
page), and even user preferences. Read on to find out how! 



Browser make and Version 

The most reliable way to figure out which browsers are loading your script is 
to ask. You ask programmatically, using JavaScript, by adding a bit of code to 
the beginning of your script, querying the DOM for browser-specific details. 
When you determine which make, model, and version of browser is attempt- 
ing to load your JavaScript-enabled Web page, you can display your page 
accordingly. 



o 




The easiest way to implement this functionality is to use the <MARQUEE> tag, 
which is an HTML tag (and corresponding scripting object) supported by 
Internet Explorer (beginning with version 3.x). The trouble is that some ver- 
sions of Navigator don't support the <MARQUEE> tag. When a non-marquee- 
supporting browser loads a Web page containing the <MARQUEE> tag, it might 
do one of three things: 
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Display the scrolling text statically or not at all 
Ignore your marquee-related JavaScript code 



rate a JavaScript error 

One way to ensure that your viewers see what you want them to see is to use 
JavaScript to see whether the browser loading your script is Internet 
Explorer. 

i>* If it is, you can use the <MARQUEE> tag with confidence. 

V If the browser isn't Internet Explorer, you can display the scrolled infor- 
mation in an alternate eye-catching fashion — for example, as a bolded, 
centered heading. 

Listing 5-1 shows the code for a "sniffer" script that examines (sniffs out) 
browser settings and displays a string of text as either a scrolling marquee or 
as a bolded, centered heading, depending on whether the browser loading 
the script is Internet Explorer. 



A custom fit, every time 



Creating different versions of each of your Web 
pages for each and every different browser 
version in existence ensures an optimum expe- 
rience for all of your users. It also represents a 
maintenance nightmare! 

A good design approach to follow is this: 

1. Provide absolutely essential information 
(such as contact information) in the form of 
plain old, every-browser-supports-ittext — 
rather than, say, a scrolling JavaScript 
marquee. 

2. Provide additional information and effects by 
using cross-browser techniques wherever 
possible. For example, layers aren't imple- 
mented in all browsers, but depending on the 
effect that you want to achieve, you might 
be able to make do by using an image- 
swapping technique (like the one you see in 



Chapter 8) or an animated GIF file instead. 
(GIFstandsfor graphics interchange format.) 
You can find more information on animated 
GIFs, including links to free animation soft- 
ware, at http : //animati on . about . 
c om /arts/an i mat ion/msubg if. htm. 

3. If you want to take advantage of the latest 
and greatest Web effects (and who doesn't, 
from time to time?), implement them in con- 
junction with a browser sniffer script — a 
script that "sniffs" out which browser a 
user is running — like the one shown in this 
chapter. For example, you can create a 
JavaScript-enabled Web page that draws a 
viewer's attention by scrolling a line of text, 
and you can allow the user to stop (and 
restart) the scrolling action. 
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Take a quick peek at Listing 5-1, and then check out Figures 5-1 and 5-2, which 
show how this script appears in Netscape Navigator 7.0. Also see Figures 5-3 
hich show how the same script appears in Microsoft Internet 
6.0. 1 spend the remainder of this section describing exactly how the 
script in Listing 5-1 works, step by step, so you can apply the principles you 
see here to your own browser-sniffing scripts. 



You can find the code shown in Listing 5-1 in the file 1 i s 1 0 5 0 1 . htm, which is 
located on the companion CD. Check it out in your own browser! 



Listing 5-1: Sniffing Out Browser Versions 



<SCRIPT LANGUAGE="JavaScri pt" TYPE=" javascri pt/text"> 
<!-- Hide from browsers that do not support JavaScript 

if (navigator. appName == "Microsoft Internet Explorer") { 

// Create a MSIE-specific Web page 

document. wri te( "You ' re running Microsoft IE, which supports MARQUEE 
scrol ling.") 

var builtlnScroll = ' <F0RM NAME="myForm"XMARQUEE ID=abc DIRECTION=LEFT 
BEHAVIOR=SCROLL SC RO L LAM0UNT=4> J a va Sc r i pt For 
Dummies. ..</MARQUEEXINPUT TYPE="button" VALUE="Start scrolling" 
NAME="startscrol 1 " onCl i ck= "document .al 1 . a be. start ( ) "XINPUT 
TYPE="button" VALUE="Stop scrolling" NAME="stopScrol 1 " 
onCl ick=" document . al 1 . a be . stop( ) "></F0RM> ' ; 



el se 



// Create a Web page that doesn't use MSIE-specific features 

var builtlnScroll = ' <CENTERXHl>JavaScri pt For Dummies .. .</HlX/CENTER>' 

if (navigator. appName == "Netscape") ( 

document. wri te( "You ' re running Netscape, which doesn't provide 
consistent support for MARQUEE scrolling.") 

) 



el se ( 

document .wri te( "You ' re not running Microsoft IE or Netscape") 



// Display the contents of two important navigator properties 
al ert( "navi gator . appName is: " + navigator. appName 

+ "\navigator.appVersion is: " + navigator. appVersion) 



// Display the appropriate Web page 
document.wri te(builtInScrol 1 ) 



// --> Finish hiding 
</SCRIPT> 
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Biowsei detection scii|>t - Netscape 
File E *lit View Go Bookmarks Tools Window Help 
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Figure 5-1: 

The 
browser 
sniffer 
script as it 
appears in 
Navigator 
7.0. Notice 
the values 
of appName 
and 

appVersion. 



- file:///C:/em/write/jsfd4e/scripts/listOB01 htm 



| Q. Search | 



I 



ail <&AIM Home Q Radio ^Netscape <\ Search OBookmarks 



You're running Netscape, which doesn't provide consistent support for MARQUEE scrolling. 



[JavaScript Ap plica tion] 



navigator.appname is: Netscape 
navigator.version is: 5.0 (Windows; en-US) 



_ss a 



g*TertPad-[C... B] 506331 ChQ... Hj leftovers,*. .. SJ Browser del. 



Figure 5-2: 

Because 
this script is 
running in 
Navigator, 
the text is 
displayed 
centered 
and bolded. 



Biowser detection script - Netscape 
File Edit View Go Bookmarks Tools Window Help 

^ |v tile:WC:/emAwite/jsfd4e/scripts/listD501 htm 

. ta, Q Mail & AIM -fi Home Si Radio H Netscape C\ Search QBookmarks 



|Q. Search [ 



You're running Netscape, which doesn't provide consistent support for MARQUEE scrolling. 



JavaScript For Dummies. 



g l TextPad-[C... 



^] Browser det., 
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Browser detection sciipt Microsoft Internet E-| : 

File Edit View Favorites Tools Help 
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Figure 5-3: 

The 
browser 
sniffer 
script as 
it appears 
in Internet 
Explorer 6.0. 
Notice the 
value of 
appName 
and 

appVersion. 
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You're running Microsoft IE. winch suppO'its ^lAEoC'UEE scio-lkig. 



□ 



navigator.appname is: Microsoft Internet Explorer 
navigator.version is: 4.0 (compatible, MSIE6.0; Windows NT5.1) 



^TextPad-[C... ^506331 ChO... j ^[] leftovers_eh.. 
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] Browser detection script - Microsoft Internet Explorer 
File Edit View Favorites Tools Help 



it? 



Address @ C;\em\write\jsfd'le\script5\list0501,htm 



You're running Microsoft IE, which supports MARQUEE scrolling. 
JavaScnpt For Dummies... 



Start scrolling 



Stop scrolling 



Figure 5-4: 

This script is 
running in 

the browser, 
so the text 
is scrolled 
and user- 
controlled. 



Done 



J My Computer 
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The code that you see in Listing 5-1 uses the if -el se statement to examine 
the contents of the built-in navi gator. appName property and determine 



eihfli^the user is running Internet Explorer. (Anavigator.appName value 



j|^i^>3sof t Internet Expl orer" means that the user is running 
Internet Explorer.) 

v 0 If the user is running Internet Explorer, the JavaScript code 

• Writes a message to the screen, which you see in Figure 5-1. 

(You're running Microsoft IE, which supports MARQUEE 
scrolling.) 

• Creates a variable named builtlnScroll that contains all the 
HTML code necessary to display scrolling text — along with but- 
tons that a user can use to turn scrolling on and off. 

V If the user is not running Internet Explorer, the JavaScript code 

• Creates a variable called builtlnScroll that contains all the 
HTML necessary to display centered, bolded text. 

• Examines the navi gator. appName property again to determine 
whether the user is running Netscape Navigator or another browser. 

• Displays an appropriate message based on the value of the 

navi gator .appName property. 

Regardless of the make of browser the user is running, the JavaScript code 

Displays a pop-up message describing the contents of the 

navi gator. appName and navi gator. appVers ion properties. 

i>* Writes the contents of the builtlnScroll variable to the screen. 

The built-in navigator object stores many different browser details. You can 
examine the contents of the navi gator. appVers ion property to determine 
which version of a particular make of browser a user is running (for example, 
6.0 or 7.0). Unfortunately, however, no standard approach to version naming 
exists. For example, notice in Figure 5-1, the value of appVersi on is 5.0 — 
even though the actual version of Navigator running is 7.0. Notice also that 
in Figure 5-3, the value of appVersi on is listed as 4.0, not 6.0 as you might 
expect (although the string MS I E 6.0, the actual version of Internet Explorer 
running, also appears as part of the appVersi on value.) The upshot is that to 
determine the correct version of browser running, you need to perform the 
following two steps: 

1. Check with each browser manufacturer to find out what appVersi on 
value to expect for each browser version. For example, 



• You can find out all about the navi gator object that Internet 
Explorer supports (including the appVersi on property) by visiting 

http://msdn.microso ft. com /I i bra ry /default. asp?url=/ 
workshop/author/dhtml /reference/objects, asp. 
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To see how Netscape describes the built-in navigator object, 
check http://devedge. netscape. com/1 i bra ry /manuals/ 
2000/ Java scri pt/1 . 5/ ref erence/ix. html . 



cessary, use a String method, such as i ndexOf ( ), to extract the 
value oftheappVersion property. The index0f( ) method returns one 
of two values: 1 if a given string isn't found, or the position of a string if 
that string is found. (Note: JavaScript begins counting string positions at 
0, not 1.) For example, the following JavaScript code searches the con- 
tents of the appVersion property to determine whether it contains the 
string "6.0": 

if (navigator. appVersion. indexOf ("6.0") == -1) ( 

alertC'The string '6.0' was not found in the value for appVersion) 

1 

el se 1 

alertC'The string '6.0' was found in the value for appVersion") 



Embedded objects 

Netscape Navigator and Internet Explorer both support embedded objects — 
specialized applications that run inside Web pages. 

Embedded objects allow users to view non-HTML content. For example, a 
Flash embedded object allows Navigator users to load Web pages containing 
animations created with Macromedia Flash, a RealPlayer embedded object 
allows Navigator users to load Web pages containing RealAudio clips, and 
so on. 



By using JavaScript, you can determine at runtime whether a user has a spe- 
cific embedded object installed and display your Web page accordingly. For 
example, you might want to begin playing a QuickTime movie as soon as a 
user loads your page — but only if that user has QuickTime capability 
already installed. 



^fr fEfl 6|£, Internet Explorer supports embedded objects through Microsoft's ActiveX 
is' CS^'' com P onents - Netscape Navigator supports embedded objects through a tech- 

called Java applets. 



nology called plug-ins. Both browsers support specialized embedded objects 



How do you determine whether a user has specific plugged-in content? 
JavaScript offers two different ways: 
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Both Navigator and Internet Explorer: The document . embeds [ ] array 
contains a list of all the objects embedded in a document via the <0B J ECT> 
^(Internet Explorer) and the <EMBED> tag (Netscape Navigator). The 
^ument . appl ets [ ] array contains a list of all the applets embedded 
a document via the <APPLET> tag. 

i>* Navigator: The navi gator, plug ins[] array contains a list of all the 
plug-ins that Navigator supports. (Popular plug-ins include Adobe 
Acrobat and Apple QuickTime.) The navi gator . mi meTypes [ ] array 
contains a list of all of the MIME types supported by Navigator. (MIME, 
or Multipurpose Internet Mail Extension, refers to the file types that 
Navigator can understand and display. Examples of popular MIME types 
include Adobe's portable document framework (. pdf) and RealNetworks' 
RealAudio (.ram). 

The <APP LET> tag was deprecated in HTML 4.0, which means that program- 
mers are encouraged to use the <0ESJECT> or<EMBED> tag (instead of the 
<APPLET> tag) to embed Java applets in Web pages. Future browsers might 
not support the <APPLET> tag. I demonstrate detecting Java applets via the 
document . appl ets [ ] array, however, because many <APPLET>-tag-containing 
Web pages still exist. 

In IE, the navi gator. plug ins[] and navi gator . mi meTypes [ ] arrays are 
always null because IE implements embedded ActiveX objects in place of 
plug-ins. To detect embedded content in documents viewed in Internet 
Explorer, access the document . embeds [ ] array. 

Detecting plugged-in content can be a little tricky. Fortunately, the code that 
you see in Listing 5-2 helps you understand the differences between embed- 
ded objects and plug-ins. 

Before scanning the code listing, though, take a look at Figures 5-5 through 
5-8, which show the code in Listing 5-2 loaded in Netscape Navigator. Then 
see Figures 5-9 through 5-12, which show the same code loaded in IE. 

You can experiment with the code in Listing 5-2 by loading the file 1 i st0502 . 
htm from the companion CD into your own Web browser. To duplicate the 
example shown in this chapter, you can download a copy of Apple QuickTime 

at www . appl e.com/quickti me/down load. 

Figure 5-6 shows how clicking the Detect Embedded Objects button displays 
the total number of <EMBED> and <0BJECT> tags in this document. Clicking 
the Detect Plug-Ins button, as shown in Figure 5-7, displays the number of 
downloaded and installed browser plug-ins; clicking the Detect Applets button, 
as shown in Figure 5-8, displays the number of Java applets embedded in the 
document using the <APPLET> tag. 



DropBook 
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(£« Detecting embedded objects (applet^ plug ins. etc.) - Netscape 
File Edit View Go Bookmarks Tools Window Help 
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Figure 5-5: 

Checking for 
embedded 
objects in 
Netscape 
Navigator. 



I 



■- file:///C:/ern/wri1e/jsfd4e/code/Chapter%202/detecting_ernl 
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Two embedded objects appear below: 

1 A sample movie provided free by QuickTime (Sample mov). Note: IE identifies applets as objects IE does not 
recognize browser plug-ins. (IE supports ActiveX objects instead of plug-ins.) 

2 A sample Java applet provided free by Sun Microsystems (JavaClock. class) Note: Navigator identifies applets as 
applets. 




QuickTime 
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detect embedded objects 1 1 detect plug-ms | 1 1 detect applets 1 1 
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Figure 5-6: 

Detecting 
objects: 1 
embedded 
object. 



[JavaSci ipt Application] 

embedded Dbject(s) detected 



a 



r~a~i 



Figure 5-7: 

Detecting 
plug-ins: 25 
browser 
plug-ins. 



[JavaScript Application] 



25 browser plug-ins detected: Mozilla ActiveX control and plugin support Mozilla Default Plug-in 
McAfee Clinic Shockwave Flash Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java Plug-in Java 
Plug-in MetaStream3 Plugin RealJukebox NS Plugirt RealPlayer(tm) G2 LiveConnect-Enabled Plug-In 
(32-bit) RealOne Player Version Plugin Adobe Acrobat QuickTime Plug-in 6.5 QuickTime Plug-in 6.5 
QuickTime Plug-in 6.5 QuickTime Plug-in 6.5 QuickTime Plug-in 6.5 QuickTime Plug-in 6.5 QuickTime 
Plug-in 6.5 Microsoft (R) DRM Windows Media Player Plug-in Dynamic Link Library Microsoft® 
Windows Media Services 

I OK I 



Figure 5-8: 

Detecting 


[JavaScript Application] 

| \^ 1 Java applets detected. (Rememember, IE counts apple 


Q 

ts as embedded objects.) 


applets: 1 




Java applet. 


I OK | 
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The same code — Listing 5-2 — executed in Internet Explorer behaves a bit 
differently, as you can see in Figures 5-9, 5-10, 5-11, 5-12, and 5-13. When you 
tl*<Detect Plug-Ins button, the number of plug-ins detected is always 
ause Internet Explorer doesn't recognize or implement plug-ins. 



£J Detecting embedded objects (applets, plug-ins. etc. I Microsoft Internet Exploiei 



Figure 5-9: 

Checking for 
embedded 
objects in IE. 



I 



File Edit View Favorites Tools Help 

Qr3ack • Q l?] I»3 f»l ✓ Sea,ch 



- Favorites %Jf> Media & 



Two embedded objects appear below: 

1 . A sample movie provided free by QuickTime {Sample inov}. Note: IE identifies applets as objects. IE does not 
recognize browser plug-ins. (IE supports ActiveX objects instead of plug-ins.) 

2. A sample Java applet provided free by Sun Microsystems I JavaClock. class) Note Navigator identifies applets 
as applets. 




QuickTime 




detect embedded objects 



detect plug-ins 



detect applets 



6] Done 
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3 Detecting embedd, 
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Figure 5-10: 

Detecting 
an 

embedded 
QuickTime 
object . . . 



Microsoft Internet Explorer 



E3 



t\ Detected the QTsample embedded object 



OK 



Figure 5-11: 

. . . and a 
Java applet. 



Microsoft Internet Explorer 



Detected the clock embedded object 



OK 
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Figu re 5-12: 

plug-ins. T 



Microsoft Internet Explorer Q 

browser plug-ins detected (Remember, IE doesnl support plug-ins ) 



OK 



Figure 5-13: 

In IE, 
applets 
aren't 
differenti- 
ated from 
any other 
embedded 
objects. 



Microsoft Internet Explorer 



a 



2 Java applets detected. (Rememember. IE counts applets as embedded 



objects.) 



Take a look at Listing 5-2. As you skim through the code, notice the similari- 
ties in detecting different kinds of embedded content. In each case, you exam- 
ine the 1 ength property associated with a built-in array (the navigator, 
plug ins. length, document. em beds. length, and document . appl ets . 
1 ength properties detect plug-ins, embedded objects, and embedded applets, 
respectively). 

Listing 5-2: Detecting Embedded Objects 

<HTML> 

<HEADXTITLE>Detecti ng embedded objects (applets, plug-ins, etc.X/TITLE> 

<SCRIPT LANGUAGE=" JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from browsers that do not support JavaScript 

///////////////////////////////////////////////// 

// The detectPl ugi ns ( ) function detects 

// Navigator browser plug-ins (software "cartridges" 

// that have previously been downloaded and 

// installed in the Netscape Navigator browser). 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

function detectPlugins( ) I 

if (navigator. plugins. length > 0) { 
var pluginDescription = ""; 
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(var numPlugins = 0; numPlugins < navigator. plugins. length; 

numPl ugi ns++) { 
pi ugi nDescri pti on = pi ugi nDescri pti on + " " + 
navigator.pl ugi ns [numPl ugi ns] . name 



alerttnavigator. plugins. length + " browser plug-ins detected: " 
+ pluginDescription) ; 



el se { 

alertC'No browser plug-ins detected. (Remember, IE doesn't support 
pi ug-i ns . ) " ) 

1 

1 

///////////////////////////////////////////////// 

// The detect Appl ets ( ) function detects Java 

// applets embedded in a Web page via the 

// APPLET tag - but for Netscape Navigator only. 

// To detect applets in a page running in 

// Microsoft Internet Explorer, you need to have 

// knowledge of the applet: for example, 

// document .appl ets[ ' nameOf Applet ' ] .someMethodi ) ; 

// 

// The length of the document. applets array 
// represents the number of objects embedded 
// in a Web page. 
// 

// The existence of additional appl ets [ ] 
// properties and methods depends on the 
// implementation of each individual applet. 
///////////////////////////////////////////////// 
function detectApplets( ) I 

if (document. applets. length > 0) I 

alert(document. applets. length + " Java applets detected. (Rememember, IE 
counts applets as embedded objects.)") 



el se { 

alertC'No Java applets detected.") 

1 

1 



for 
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mijj mi ii ii ii ii ii ii mi ii ii mi ii ii mi ii ii i 

etectEmbeds( ) function detects content 
'ded in a Web page via the EMBED 
// or OBJECT tag. 
// 

// The length of the document. embeds array 
// represents the number of objects embedded 
// in a Web page. 

// 

// The existence of additional embeds[] 
// properties depends on the implementation 
// of each embedded object. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
function detectEmbedst ) ( 

if (navigator. appName == "Microsoft Internet Explorer") I 
// The user is running IE, so check for objects 
// embedded using the OBJECT tag. 
// 

// The readyState property of an object embedded 

// using the OBJECT property can contain one of 3 
// values: 

// 0 = uni ni ti al i zed 
// 1 = loading 

// 4 = finished loading and ready to go 

if (document. QTsample. readyState == 4) I 

al ert( "Detected the QTsample embedded object"); 



if (document. clock. readyState == 4) ( 

alert( "Detected the clock embedded object"); 



el se ( 

if (navigator. appName == "Netscape") ( 

// The user is running Navigator, so check 
// for objects 

// embedded using the EMBED tag. 



if (document. embeds. length > 0) { 
alert (document. embeds. length 

+ " embedded object(s) detected.") 
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else { 

alertCNo embedded objects detected."); 



// --> Finish hiding 
</SCRIPT> 

</HEAD> 
<B0DY> 

Two embedded objects appear below: 

<0L> 

<LIXb>A sample movie provided free by QuickTime (Sample. mov) .</b> 

Note: IE identifies applets as objects. IE does not recognize browser plug-ins. 

(IE supports 
ActiveX objects instead of plug-ins.) 

<LIXb>A sample Java applet provided free by Sun Microsystems 

(JavaClock.class)</b> 
Note: Navigator identifies applets as applets. 

</0L> 



<!-- 

You use the OBJECT tag to embed an ActiveX component into a 

page meant for MSIE; you use the EMBED tag to embed a plug-in into a page meant 

for Navigator. 

Notice the difference between the way the value of the SRC 
variable must be specified. 

// --> 



(OBJECT CLASSID="cl sid : 02B F25D5 - 8C 1 7 -4B23 - BC80 - D3488AB DDC6B " 
WIDTH="320"HEIGHT="250" 

I D= " QTs ampl e" 

CODEBASE="http://www.appl e.com/qtacti vex/qtpl ugi n . cab"> 
<PARAM name="SRC" VALUE="c:\Program Files\QuickTime\Sample.mov"> 
<PARAM name="AUTOPLAY" VALUE="true"> 
<PARAM name="CONTROLLER" V A LU E= " t rue " > 



<EMBED SRC="file://c:\Program Fi 1 es\Qui ckTime\Sampl e .mov" WIDTH="320" 
HEIGHT="250" AUTOP LAY= " t r ue " CONTRO L LER= " t rue " 
P LUG I NSPAGE=" http : //www. apple.com/quicktime/download/"> 

</ EMB ED> 



</OBJECT> 



(continued) 
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a applet is freely available from Sun Microsystems. 
For more info, 

visit http://java.sun.com/openstudio/applets/clock.html 

Note: The APPLET tag was deprecated in HTML 4.0, which 
means that programmers are encouraged to use the OBJECT tag 
(instead of the APPLET tag) to embed Java applets 
in Web pages. Future browsers might not support the APPLET tag. 

// --> 



<APPLET ID="clock" CODEBASE="cl asses " CODE=" JavaCl ock. class" WIDTH="150" 
HEIGHT=" 150 " > 



<PARAM 


NAME= 


"bgcol or" 


VA LU E= " FFFFFF " > 


<PARAM 


NAME= 


"border" 


VALUE="5"> 




<PARAM 


NAME= 


"ccol or" 


VALUE="dddddd"> 




<PARAM 


NAME= 


"cfont" 


VALUE="TimesRoman | 1 


3 0 L D 1 1 8 " > 


<PARAM 


NAME= 


"del ay" 


VALUE="100"> 




<PARAM 


NAME= 


"hhcol or" 


VALUE="OOOOFF"> 




<PARAM 


NAME= 


"link" 


VALUE="http://java.: 


;un.com/"> 


<PARAM 


NAME= 


"mhcol or" 


VALUE="OOFFOO"> 




<PARAM 


NAME= 


"ncol or" 


VALUE="000000"> 




<PARAM 


NAME= 


"nradius" 


VALUE="80"> 


<PARAM 


NAME= 


"shcol or" 


VALUE="FFOOOO"> 




</APPLET> 











<p> 

<FORM> 

<INPUT TYPE="button" V A LU E= " detect embedded objects" onCl i ck="detectEmbeds( ) "> 

<INPUT TYPE="button" V A LU E= " detect plug-ins" onCl i ck="detectPl ugi ns( ) "> 

<INPUT TYPE="button" V A LU E= " detect applets" onCl i ck="detectAppl ets( ) "> 

</FORM> 

</BODY> 

</HTML> 




Keep in mind that you can use two ways to detect Netscape Navigator plug- 
ins: by examining the navi gator, plug ins[] array and by examining the 
navi gator . mi meTy pes [ ] array, as shown in Listing 5-2. Because Internet 
Explorer doesn't support plug-ins, however, these two arrays are always 
empty in Internet Explorer. 




Objects embedded by using either the <EMBED> or <0BJECT> tag are added to 

the document . embeds [ ] array. 
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The document. plug ins[] array is a synonym for the document.embeds[] 
array, but because the document . pi ugi ns [ ] array appears so similar to the 

3alnrg*4o r . p 1 u g i n s [ ] array — an array that holds an entirely different kind 
fpVl^J — I suggest sticking with the document . embeds [ ] array when you 
want to determine the number of embedded <0BJECT> and <EMBED> tags in a 
document. 



The referrer page 

A referrer page is the Web page that a user loaded directly before loading 
your Web page. You can use JavaScript to determine the referring page at 
runtime — which is useful if you're keeping track of statistics. (Some pro- 
grammers enjoy knowing precisely what links users follow to get to their 
Web pages.) 



To identify the referring page, you examine the referrer property of the 
document object, as shown in the following JavaScript code: 



if (document . referrer == "") I 
document .wri tel n( "You pullec 

) 


this page up 


fresh i n a browser . " ) 




el se { 

document. wri tel r 

) 


( "You were r 


eferred to th 


is page by " + documer 


t. referrer) ; 



The above code snippet determines the following: 



If the value of document . referrer is blank (blank is denoted by " " in 
the code snippet), the user typed the name of the Web page directly into 
the browser address field. 

If the value of document . referrer isn't blank, document . referrer 
contains the name of the referring page. 

The files detecti ng_ref errer_base . htm and detecti ng_referrer . htm, 
which you find on the companion CD, allow you to test the code that I 
describe in this section. To use these files, upload them to a Web server, load 
the file detecti ng_ref errer_base . htm in your Web browser, and click the 
link that appears. 

You must upload your HTML files to a Web server in order to test the code 
that you see in this section; the value of document. referrer is always blank 
when tested locally. 
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User preferences 




it be great if your users could choose they way they'd prefer to see 
bTir^^D pages? Well, if you use JavaScript, they can! You can use JavaScript 
to present your users with a series of options right away, before your Web 
page loads — and then use that feedback to display your page the way your 
users want to see it. 

In Figures 5-14 and 5-15, for example, you see prompts asking users which 
color they prefer for background and text color, respectively Figure 5-16 
shows the result: a Web page containing the user's preferred color scheme. 



Figure 5-14: 

Asking 
users 
for their 
preferences. 



Explorer User Prompt 


s 


Script Prompt: 

What BACKGROUND color would you like? (red, green, white, yellow, etc.) 

Cancel 


1 


jptnkj 









Figure 5-15: 

Your users 
can enter 
the text 
color. 



Explorer User Piompt 










Script Prompt: 

What TEXT color would you like? (red, gre 


en, white, yellow, etc.] 




OK 
Cancel 


1 


blue! 














The code in Listing 5-3 is available on the companion CD: just load the file 

1 ist0503.htm. 



Listing 5-3: Detecting User Preferences 

<HTML> 
<HEAD> 

<TITLE>Detecti ng user preferences (and customizing display)</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from browsers that do not support JavaScript 

// Ask the user for color preferences 

var displayColor = promptC'What BACKGROUND color would you like? (red, green, 
white, yellow, etc.)", "pink"); 
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var textColor = prompt( "What TEXT color would you like? (red, green, white, 
yellow, etc.)", "blue"); 



ay page content 

.writeln("<BODY BGC0L0R=" + displayColor + " TEXT= " + textColor + ">You 
chose " + textColor + " text on a " + displayColor + " 
background. </B0DY>") 



// --> Finish hiding 

</SCRIPT> 

</HEAD> 

</HTML> 

As you skim through the JavaScript code in Figure 5-3, notice that it defines 
two variables: 

Ij^displayColor, containing the user's choice of background color 
i>* textCol or, containing the user's choice of text color 

After these two variables are defined, the JavaScript code uses them — along 
with the writelnC) method — to define and display the < B 0 D Y > section of 
the Web page. 



Figure 5-16: 

A cus- 
tomized 
display 
based 
on user 
preferences. 
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In This Chapter 

Taking a close look at cookies 

Understanding the benefits and limitations of cookies 
Setting and retrieving cookie values 

Creating a script to recognize previous visitors to your site 

••••••••••••••••••••••••••••••••••••••••••••••••• 

M M nlike a traditional client/server configuration, in which the client and 
%rm the server have to agree to begin and end every conversation, the Web 
is stateless. Stateless means that, by default, neither Web browsers nor Web 
servers keep track of their conversations for later use. Like two ships that 
pass in the night, browsers and servers interact only when a user downloads 
a Web page, and then they immediately forget the other ever existed! 

Cookies — tiny text files that a Web server can store on a client's computer 
via a Web browser — were designed to change all that. By using cookies to 
keep track of browser-to-server interactions, Web developers can create intel- 
ligent Web sites that remember details about each and every user who visits 
them. You can even create cookies with built-in expiration dates so that infor- 
mation stored as cookies is maintained for only a limited period of time — 
say, a week or a month. 



Cookie Basics 

You can use JavaScript, Perl, VBScript, or any other Web-sawy language to 
store small text files called cookies on your site visitor's computer. Because 
the whole point of using cookies is for server-side applications to keep track 
of client information, however, cookies are typically created and set by CGI 
programs rather than by JavaScript scripts. (CGI stands for Common Gateway 
Interface. CGI programs, which are usually written in Perl or C/C++, live on 
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Web servers; their job in life is to transmit data back and forth between a Web 
server and a Web client.) But because this book is devoted to JavaScript, later 
apter I show you how to create and interact with cookies by using 
it instead of C/C++, Perl, or some other, more traditional cookie- 
manipulation language. 



Before I dive into the code, however, I explain exactly what cookies are and 
how they work. 



Why use cookies} 

Cookies allow you to store information about a user's visit on that user's 
computer and retrieve it when the user revisits your site. Two of the most 
common reasons Web developers use cookies are 

To identify visitors: You can detect when a user has previously visited 
your site and customize what that user sees on subsequent visits. For 
example, you can greet visitors by name, tell them what's changed on 
your site since their last visits, display customized pages based on their 
previous purchasing, their site navigation habits, and so on. 

To save transaction state: You can store the status of any lengthy trans- 
actions between your site and your visitors' browsers to safeguard against 
interruptions. For example, imagine that I'm filling out a lengthy form 
on your Web site when all of a sudden my dog chases my cat under my 
desk. They scuffle, and before I know what's happening, my computer 
plug comes sailing out of the wall socket! If your site uses cookies, I can 
throw my beasts out in the backyard, plug my machine back in, reload 
your Web page, and pick up right where I left off. If your site doesn't use 
cookies, I have to start filling out the form from the beginning. 



Cookie security issues 

Cookies have been used safely for a few years now, and because their use is 
strictly governed by Web browsers, they rank mighty low on the list of poten- 
tial security threats. Still, they are highly controversial in some programmer 
circles for two reasons: 

Cookies jump the traditional bounds of a Web browser by storing 
information directly on users' hard drives. Some folks fear that cookies 
can damage their computers by infecting their computers with viruses 
or by storing such huge amounts of data on their hard drives that their 
computers no longer work properly. 
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Fortunately, cookies come with built-in safeguards against both these 
threats. No matter whether you use JavaScript or some other language, 
can't get past the following common-sense limits that Web browsers 
se: 



Where cookies are placed: Internet Explorer 6.x running on 
Windows XP, for example, stores cookies as individual text files 
and places them in the following directory: 

C:\Documents and Settings\Owner\Cookies 

Netscape Navigator 7.0 running on Windows XP bunches cookies 
together in a single file, called cookies . txt, and places that file in 
a random-generated directory name similar to the following: 

C:\Documents and Setti ngs\Owner\Appl ication Data\Mozil 
klambsdn.slt 



I a\prof i 1 es\defaul t\ 



• How large cookie files can be: Both Internet Explorer and 
Netscape Navigator limit cookie files to 4K. 

• How many cookies any given Web site can place on a user's hard 
drive: Both Internet Explorer and Netscape Navigator set the limit 
at 20 cookies per site and set an overall total of 300 cookies per 
browser. 

• Which sites have access to cookies: Cookie visibility is configurable. 
(You see how to configure cookie access in the "Configuring cookie 
support" section in this chapter.) 

V Cookies enable Web developers to gather detailed marketing informa- 
tion about users without those users' knowledge or consent. Using 
cookies in conjunction with client-side applications like CGI programs 
and Java applets, Web developers can save, examine, and interpret virtu- 
ally every interaction between a user and a Web site. Every click, every 
keystroke, every credit card purchase can be used to customize what a 
user sees the next time he visits a cookie-enabled Web site. 



Fortunately, users who feel uncomfortable with the Big Brother-like aspect of 
cookies have a choice: They can configure their browsers to limit cookie sup- 
port or turn it off altogether. (You see an example of configuring cookies in 
the very next section.) 



Looking at cookies from 
a user's perspective 

One of the best ways to understand how cookies work is to take a look at 
them from a user's perspective. In this section, I show you how to configure 
cookie support in your browser, visit a cookie-enabled site, and examine an 
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actual cookie file. When you finish, you have all the background you need to 
be able to jump right into making cookies with JavaScript code. 




ing cookie support 

Navigate 
of cookie support. 



* Netscape Navigator and Internet Explorer both allow users to specify a level 



In Netscape Navigator 7.x, you configure cookie support by following these 
steps: 

1. Choose EditOPreferencesOPrivacy & SecurityOCookies. 

2. Select one of the following options in the Cookies dialog box that 
appears, as shown in Figure 6-1: 

• Disable Cookies. 

• Enable Cookies for the Originating Web Site Only (as opposed to 
any server in the originating domain). 

• Enable Cookies Based on Customizable Privacy Settings. (Click the 
View button to set privacy settings based on the published privacy 
policies of cookie-setting sites.) 

• Enable All Cookies. 



Figure 6-1: 

Configuring 
cookie 
support in 
Netscape 
Navigator 
7.x. 
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Click the Manage Stored Cookies button in the Cookies dialog box to view the 
cookies stored on your computer. 




fight guess, users who disable cookie support can't benefit from the 
cookie-accessing scripts that you create with JavaScript. One way to alert 
users that they need to turn on cookie support to get the most out of your 
site is to tell them! Just include the following sentence at the top of your 
cookie-enabled Web pages: Thi s Web site requires you to turn on 
cookie support. 

To configure cookie support in Internet Explorer, follow these steps: 

1. Choose ToolsOInternet Options. 

2. In the Internet Options dialog box that appears, click the Privacy tab. 

3. Move the slider on the left side of the Privacy tab from all the way up 
(the Block All Cookies option, as shown in Figure 6-2) to all the way 
down (the Accept All Cookies option). 

The interim options are High, Medium High, Medium, and Low. You can 
customize any option by clicking the Advanced button. 



Figure 6-2: 

Configuring 
cookie 
support in 
Internet 
Explorer. 
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Visiting a cookie-enabled site 

Wljen your browser is configured to accept cookies, you can surf to cookie- 
sites with impunity. Figure 6-3 shows how a cookie can be used to 
■ogfSHe visitors and present them with custom greetings and options. 
(You find out how to create a similar custom greeting later in this chapter, in 
"Displaying content based on cookie contents: The repeat-visitor script.") 




Exploring a cookie file 

This section shows you what goes on underneath the covers when you visit a 
cookie-enabled site. 





In Netscape Navigator 7.1, you can examine the cookie file by choosing 
EditOPreferencesOPrivacy & SecurityOCookies and clicking the Manage 
Stored Cookies button. The resulting Cookie Manager dialog box appears, 
as shown in Figure 6-4. 

You can get your hands on the raw cookie file that Netscape Navigator gener- 
ates by loading the file C : \Documents and Setti ngs\Owner\Appl i cati on 
Data\Mozilla\profiles\defalt\klambsdn.slt\cookies. txt (which is 
the text file in which Netscape Navigator 7.1 stores cookies) into your favorite 
editor. 



Figure 6-3: 
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of a cookie: 
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com. 
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session-id 
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Name: ubid-main 
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Path: / 
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| Remove Cookie | [ Remove All Cookies | 
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Internet Explorer stores individually generated cookie files in the following 
directory: C:\Documents and Setti ngs\user/Vame\Cooki es. Cookie file- 
names take the form of userName@domai n[ti mesAccessed~\ .txt. For exam- 
ple, on my machine, the following file exists after a visit to Amazon.com: 



C:\Documents and Settings\Owner\Cookies\owner@amazon[l] .txt 



You can also type JavaScript:alert(document.cookie); in the Address bar of 
Internet Explorer or Netscape Navigator after you load a Web page. When you 
click Go, you see a pop-up window containing all the cookies associated with 
that page. 



SaVinq and Retrieving User Information 

Working with cookies involves two distinct operations: creating, or setting, a 
cookie; and accessing the created cookie. Typically, you create a cookie only 
once, the first time a user visits your site. After that, you can access the cookie 
every time the user revisits your site or as often as you like. The following 
sections show you how. 
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Setting a cookie 



ki e property of the document object holds all the cookies associated 
'cument. 



To create and set a cookie, you must define a variable/value pair that repre- 
sents the name of the cookie and the cookie's content (name=va 7 ue). 
Because cookie values can't contain semicolons, commas, or white space, I 
recommend using the built-in JavaScript e s c a p e ( ) function when storing a 
cookie's value and using the built-in JavaScript unescape( ) function when 
retrieving a cookie's value. (The escape ( ) function encodes any semicolons, 
commas, and white space that exist in a string, and the unescape( ) function 
reconstitutes them.) Other than this restriction, a cookie value can contain 
just about anything you like! (Some programmers come up with fancy encryp- 
tion schemes, but others stick with simple text-based strings.) 

In addition to the mandatory name and value, you might define optional, 
semicolon-delimited attributes for a cookie (see Table 6-1). 



Table 6-1 


JavaScript Cookie Attributes 


Attribute 


Description 



expires = expirationDate; The date, in milliseconds, after which the 

cookie expires (and is deleted by the Web 
browser). Expiration dates are normally 
stored in the standard Greenwich Mean 
Time format. (You format a date in GMT by 
using the toGMTStri ng( ) method of the 
Date object.) 



path=path ; 


The path of the CGI program to which the 
cookie contents can be transmitted. The 
default is the root path of the originating 
server. 


domain=domain ; 


The domain (for example, www .acme . com) 




to which a cookie can be transmitted. 




Restricted by default. (See the "Cookie 




security issues" section for details.) 


secure 


Specifies that this cookie can be transmitted 
only by a secure protocol such as https. 
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To create a cookie and store it on the user's hard drive, all you need to do is 
set the document . cooki e property equal to a string containing the required 
ue pair and any optional, semicolon-delimited cookie attributes, as 
the following code snippet (taken from Listing 6-1, which appears 
later in this chapter): 



document. cookie = name + "=" + escape(value) + 

((expires == null) 1 "" : ("; expires=" + expires. toGMTSt ri ng ( ) ) ) + 
((path == null) ? "" : ("; path=" + path)) + 
((domain == null) 1 "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); 



The cryptic, odd-looking syntax — {condition) ? something : 
somethi ngEl se — is JavaScript shorthand for "if this condition is true, 
then add something. Otherwise, add somethingElse." 

For example, here's how the JavaScript interpreter sees the JavaScript 



phrase: 








( (expi res == null ) 1 


"' : ( " ; expi res=" + expi r 


■es 


.toGMTStringO)) 




It thinks to itself "If the value for expi res is nul 1 , add " " to 
the document . cooki e property. Otherwise, add the string 

expi res = someGMTFormattedDate to the document, cookie property." 



You can find out more about the conditional ? : operator in Chapter 3. 



Accessing a cookie 

You can set attributes for a cookie by using JavaScript (specifically, the 
expi res, path, domai n, and secure attributes, as I describe in the section 
"Setting a cookie"), but you can't access those attributes by using JavaScript. 
In contrast, you can access a cookie's value. 

This seemingly odd state of affairs — being able to set attributes that you 
can't retrieve — actually makes sense when you think about it. All these 
attributes are security-related, and preventing them from being altered helps 
maintain cookies' integrity and safety. After you give out your cookies, only 
the Web browser is privy to cookie attributes. 

To access a cookie's value, you query the cookie property associated with 
the document object. (You see how to set the cooki e property in "Setting a 
cookie," earlier in this chapter.) 
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Check out the following JavaScript code snippet: 

endstr = document . cooki e. i ndexOf( ";" , offset); 





return unescapetdocument. cookie. substringtoffset, endstr)); 
This code contains two statements: 



f The first statement uses the i ndexOf ( ) method to identify the portion 
of the myCooki e=userName ; string between the = and the ; (in other 
words, to identify the stored value of the userName string). 

v 0 The second statement unescapes the stored value of the userName 
string. (Unescaping is computerese for decoding any special characters 
encoded when the cookie was set.) 



You can find a working copy of this code snippet in Listing 6-1, later in this 
chapter. 

bispiayinq content based on cookie 
contents: The repeat-Visitor script 

You can create a script that registers a user by saving the user's name to the 
user's hard drive by using a cookie. On subsequent visits to the site, the 
script accesses the cookie from the user's hard drive, recognizes the user's 
name, and uses the information to display a custom greeting. Figure 6-5 
shows stage one of the repeat-visitor script where users must first register 
their names. 

In many real-life applications, you want to create and access cookies by using 
a server-side technology, such as a CGI script. Because CGI scripting is 
beyond the scope of this book, in this chapter I show you how to create and 
access cookies with JavaScript instead. (The syntax between CGI scripting 
languages and JavaScript differs, but the basic ways that you interact with 
cookies are the same.) 

After users register their names, as shown in Figure 6-5, they never see the 
registration form again. Users can close their browsers, turn off their machines, 
and go away on vacation for a week. When they return and attempt to access 
the registration page again, the script recognizes that they've already regis- 
tered and loads the For Registered Users Only page with a customized greeting 
(see Figure 6-6). 
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Cookie Example I 



You must register before you can visit the rest of my site. To register, enter your full name, then click the button marked 
'Register'. 



Wolfgang A. Mozart 



Register 



Micsef, Internet E,pl^Te7 



■\ Thank you for registering, Wolfgang A Mozart! Click OK to enter the 
• \ registered portion of my srte. 



&} Done 

\ 
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Figure 6-6: 
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page. 
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Welcome to the registered portion of my site, Wolfgang A. Mozart! 



■6] Done 
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I implemented the repeat-visitor script in two parts based on the two actions 
in Figure 6-5 and Figure 6-6: 
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ie Example I (For Unregistered Users page): This script registers 
a user's name, stores a cookie on that user's machine, and loads the For 
Registered Users Only page. 

Cookie Example II (For Registered Users Only page): This script 
accesses the cookie and displays a custom greeting. 

When you create a cookie, you specify an expiration date. After the specified 
expiration date, the cookie can no longer be accessed. An expiration of the 
null value marks a cookie as transient. (Transient cookies stay around in 
memory only as long as the user's browser session lasts; they aren't saved to 
the user's hard drive.) In the example in Listing 6-1, you see an expiration 
date of one year from the time the cookie is created. 

The Cookie Example I and Cookie Example II scripts are shown in Listings 6-1 
and 6-2, respectively. You can find them in the 1 i st 0601 . htm and 
1 i st 0602 . htm files on the companion CD-ROM. 



Listing 6-1: Cookie Example I: The Registration Form 

<HTML> 

<HEADXTITLE>Cookie Example I: The Registration Page (From JavaScript For 
Dummies, 4th Edi ti on )</TITLE> 

<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 

<!-- Begin hiding 

function getCooki eVa 1 (offset) { 

// This function returns the portion of the 
// "myCooki e=userName" string 
// between the = and the ; 

var endstr = document. cookie. indexOf (";", offset); 

if (endstr == -1) ( 

endstr = document. cookie. length; 



return unescape(document. cookie. substringtoffset, endstr)); 



function getCookie (cookieName) ( 



// You have to pick apart the cookie text. To do this, 
// You start by figuring out how many characters are 
// in the string "myCookie=" 
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var arg = cooki eName + " = " ; 
var arg Length = arg. length; 

ow find out how long the entire cookie string is 
cooki e Length = document. cookie. length; 

// If cookies were stored as objects, 

// life would be much easier! 

// As it is, you must step through the contents 

// of a cookie character 

// by character to retrieve what is stored there, 
var i = 0; 

// While the "i" counter is less than the number 
// of characters in the cookie . . . 
while (i < cooki e Length ) ( 

// Offset the "j" counter by the number of characters 
// in "myCookie=". 
var j = i + arg Length ; 

// If you find "myCookie=" in the cookie contents 
if (document. cookie. substring^ , j) == arg) { 

// return the value associated with "myCookie=" 

return getCooki eVal ( j ) 

1 

if (i == 0) ( 
break 



return nul 1 ; 

1 

function setCookie(name, value) { 

// Capture all the arguments passed to the 
// setCookieO function. 

var argv = setCookie. arguments; 

// Determine the number of arguments passed into 
// this function 

var argc = setCookie. arguments. length; 

// You expect the third argument passed in to 
// be the expiration date. 

// If there isn't a third argument, set the expires 
// variable to null . 

// (An expiration date of null marks a cookie as 
// transient. Transient cookies are not saved to the 
// user's hard drive. ) 
var expires = (argc > 2) ? argv[2] : null; 

(continued) 
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//_You expect the fourth argument passed in to be 
he path. 

f there isn't a fourth argument, set the 
// path vari abl e to nul 1 . 
var path = (argc > 3) ? argv[3] : null; 



// You expect the fifth argument passed in to be 

// the domain. 

// If there isn't a fifth argument, set the 

// domai n vari abl e to null . 

var domain = (argc > 4) ? argv[4] : null; 

// You expect the sixth argument passed in to be 

// true or false, 

// depending on whether this cookie is secure 

// (can be transmitted 

// only to a secure server via https) or not. 

// If there isn't a sixth argument, set the 

// secure variable to false, 
var secure = (argc > 5) 1 argv[5] : false; 



// Set the cookie. 

document. cookie = name + "=" + escape(value) + 

((expires == null) ? "" : ("; expires=" + expi res . toGMTStri ng( ) ) ) + 
((path == null) 1 "" : ("; path=" + path)) + 
((domain == null) 1 "" : ("; domain=" + domain)) + 
((secure == true) ? "; secure" : ""); 



function registertuserName, value) ( 

if (userName == "" || userName == null) ( 

// The name is missing, so register this user as "Unknown User." 
userName = "Unknown User" 

) 



// If no cookie called ' My Cooki e ' exists . . . 

i f ( getCooki e( 'myCookie' ) == null) ( 

// Set the expiration date to today, 
var expdate = new Date( ) 



// Set the expiration date (which JavaScript 

// stores as milliseconds) 

// to a date exactly one year in the future. 

expdate. setTimetexpdate. getTimet ) + (1000 * 60 * 60 * 24 * 365)); 

setCooki e( 'myCooki e ' , userName, expdate); 

alert ("Thank you for registering, " + userName + "! Click OK to enter 
the registered portion of my site."); 
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// Whisk the user to the page reserved 
// for registered users, 
location. href = "list0602.htm" 



///////////////////////////////////////////////////////// 
// This code checks to see whether a cookie named 'myCookie' 
// exists on the user's machine. 
// 

// If it does, the user has already registered, so whisk 
// the user to registered-users-only portion of the site. 
// 

// If no cookie called 'myCookie' exists on the user's 

// machine, ask the user to register. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

II If the "myCookie" cookie exists . . . 

if (getCookiet 'myCookie' ) != null) ( 

// Then redirect the user's browser to the 

// password-protected page called "list0602.htm" 

1 ocati on. href =" list0602.htm" 



// End hiding --> 

</SCRIPT> 

</HEAD> 

<B0DY> 

lliil (from here to the closing </B0DY> tag) 
<Hl>Cookie Example K/H1> 

<F0RM NAME="loginForm"> 

You must register before you can visit the rest of my site. To register, enter 
your full name; then click the Register button. 

<P> 

<INPUT TYPE="text" NAME="ful 1 Name" SIZE=35> 

<BR> 

<INPUT TYPE="button" VALUE=" Regi ster " 

onCl i ck="regi ster( 1 ogi nForm. ful 1 Name. val ue) "> 

</F0RM> 
</B0DY> 
</HTML> 
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Here's a quick run-down on how the JavaScript interpreter handles the code 
in Listing 6-1: 



interpreter first checks to see whether a cookie named myCooki e 
exists. If such a cookie does exist, the interpreter — understanding that 
this user has previously registered — loads 1 i st0602 . htm. 

2. If no such cookie exists, the interpreter loads the registration page, com- 
plete with an input text box and a Register button. 

3. When a user clicks the Register button, the interpreter begins executing 
the regi ster ( ) function, which in turn invokes the setCookieO method 
to store a cookie on the user's machine. The cookie contains the user's 
name and an expiration date. 

4. After the regi ster ( ) function stores the cookie, the regi ster ( ) func- 
tion loads the For Registered Users Only page. 

Check out Listing 6-2 to see an example of how to access a cookie to create 
and display a custom greeting. 



Listing 6-2: Cookie Example II: Displaying the Custom Greeting 

<HTML> 

<HEADXTITLE>Cooki e Example II: The Custom Greeting (From JavaScript For 
Dummies, 4th Edi ti on )</TITLE> 

<SCRIPT LANGUAGE-" JavaScri pt"> 

<!-- Begin hiding 

function getCooki eVa 1 (offset) { 

var endstr = document. cookie. indexOf (";", offset); 
if (endstr == -1) ( 

endstr = document . cooki e. 1 ength ; 

) 

return unescapetdocument. cookie. substri ng ( offset , endstr)); 

) 

function getCookie (name) I 
var arg = name + "=" ; 



var arg Length = arg. length; 

var cookieLength = document. cookie. length; 
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var i = 0; 

e (i < cookieLength) ( 
var j = i + a rg Length ; 

if (document. cookie. substri ng( i , j ) == arg) { 
return getCookieVal ( j ) 

1 

if (i == 0) ( 
break 



return nul 1 ; 

) 

////////////////////////////////////////////////////////// 
// This code checks to see whether a cookie named 
// 'myCookie' exists on the user's machine. 
// 

// If it does, the user has already logged in with a valid 
// userlD and password, so display the site; otherwise, 
// display an error. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
II If the "myCookie" cookie exists . . . 
// #1 (down to document. write(documentText) 
var nameOfVi si tor = getCooki e( 'myCookie' ) 

insert // \\1 (down to closing brace associated with if statement) 
i f ( nameOf Vi s i tor != null ) ( 

var documentText = "<B0DYXHl>Cooki e Example I K/Hl>Wel come to the 

registered portion of my site, " 
documentText += nameOfVi si tor 
documentText += "!</B0DY>" 

) 

insert // #3 (down to closing brace associated with else statement) 

el se { 

var documentText = "<B0DYXHl>Cooki e Example IK/Hl>Sorry! Only registered 
users can access this page . </B0DY> " 

) 

document .wri te( documentText ) 

// End hiding --> 
</SCRIPT> 
</HEAD> 
</HTML> 
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You can't expire me ... I quit! 



Tourah'nrelffte a TTTbkie directly by using JavaScriptforthe simple reason that only browsers can 
actually write to the visitor's hard drive. (It's this security measure that prevents cookies from being 
able to wreak havoc on users' hard drives.) 

What you can do in JavaScript is to altera cookie's expiration date to a date far in the past. Doing 
so causes the Web browser to delete the newly expired cookie automatically. 

function deleteCookie 0 { 
var expi red = new Date( ) ; 

// You can't delete a cookie file directly from the user's 
// machine using JavaScript, so nark it as expired by 
// setting the expiration date to a date in the past. 

// First, set the exp variable to a date in the past . . . 
expired. setfime (expi red. getfimet ) - 1000000000); 

// fhen, get the cookie 

var cookieValue = getCookie ( 'nyCookie' ) ; 

// Finally, set the cookie's expiration date to the long-past date, 
document. cookie = 'nyCookie' + "=" + cookieValue + "; 

expires=" + expired. toGMTSt ri ng ( ) ; 



In Listing 6-2, here's what's going on: 

1. The JavaScript interpreter looks for a cookie named myCooki e on the 
user's machine. 

2. If a cookie named myCooki e exists, the JavaScript interpreter constructs 
and displays a custom greeting with the registered user's name. 

3. If no such cookie exists, the JavaScript interpreter constructs an error 
message. 
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In This Chapter 

Using JavaScript to open and close pop-up windows 

Positioning content inside windows 

Sharing information between frames with JavaScript 



rowser windows and frames are the lenses through which your users 
view your Web page content. 

As a Web page designer, you can choose to create Web pages that open in a 
single browser window, which is the standard approach. But with JavaScript, 
you can do much more. You can display content in separate windows and 
close those windows automatically. You can even display multiple HTML 
documents inside a single browser window by using frames, and then share 
information between those frames by using JavaScript. 

By using JavaScript, you can create all kinds of sophisticated window and 
frame effects. This chapter shows you how. 

Whether to include HTML frames in your Web site is a personal design decision. 
Some folks love frames because they not only allow you to create effective 
navigation structures, they also allow you to provide hyperlinks to other 
sites while discouraging users from surfing away to those hyperlinked sites 
and abandoning your site. The downside? Frames can be complicated to 
implement, and some people dislike the fact that they hide URL information. 
(Basically, the URL for a link that's open in a frame doesn't appear in the 
Address bar of the browser.) To see the URL for a link opened in a frame, 
for example, you can't just click the link; you must right-click and select 
Properties (Internet Explorer) or This FrameOView Page Info (Navigator). 
If you do decide to implement frames, however, JavaScript can help you 
make the most effective use of them. 
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ser window per Web page is the basic, bare-bones approach to Web 
development — and for many applications, this approach works just fine. But 
sometimes you want to display more than one window. For example, imagine 
you're a teacher creating a language-arts Web site. You might want to include 
hyperlinks to vocabulary words so that when your visitors click one of the 
hyperlinks, the dictionary definition of the hyperlinked word appears in a 
separate pop-up window. 

If you do decide to create a Web page that displays more than one browser 
window, you need to know how to manipulate the extra windows. For exam- 
ple, you need to know how to position content within the extra windows and 
close the extra windows. In this section, I show you how to open and manipu- 
late multiple windows from a single Web page. 

Displaying new windows — called pop-up windows or just plain pop-ups — can 
be annoying to your users, so use this skill very sparingly. Also, keep in mind 
that many users purchase or download free third-party pop-up-blocker soft- 
ware (such as the Google utility that you can find for free athttp://toolbar. 
google .com) or turn off JavaScript support in their browsers to avoid pop- 
ups. When they surf to your site, these users don't see your handiwork. 



Opening and closing new browser Windows 

One popular school of thought when it comes to Web design is to do every- 
thing you can (within reason, of course) to keep visitors at your site after 
they find it. For example, adding hypertext links that lead to other sites — 
although useful — might backfire by scooting your visitors off to other people's 
Web sites before they've really looked at yours. After all, who knows when 
(or whether) your visitors will return? 

One remedy for this situation is to make your page's HTML links open the 
next site in a new browser window. Visitors get to surf freely from your site 
to others, as appropriate, but without ever leaving your site. It's a win-win 
situation! Take a look at Figures 7-1 and 7-2 to see what I mean. 

In Figure 7-2, you see how creating a new window leaves the original browser 
window intact. (Clicking the Close the Window button causes the newly 
opened window to disappear.) 
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Figure 7-1: 

Clicking the 
Open a 
Window 
button 
opens a 
window you 
can prefill 
with a link. 
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Opening (and closing) a new browser window 



Openawindow I Close the window 



Done 
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Figure 7-2: 

Loading a 
URL into a 
separate 
window 
keeps your 
visitor close 
to home. 
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Opening (and closing) a new browser window 



Open awindow Close the window 
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Opening multiple browser windows is easy 
when you use a function that takes a 
parameter. 



Open window #1 



Open window #2 



Open window #3 



Done 
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Creating such a new window is mighty easy in JavaScript. Listing 7-1 shows 
you how. 

ment with the code in Listing 7-1 in your own browser, open the 
list0701.htm file that you find on the companion CD. 



Listing 7-1 : Creating (And Destroying) a New Browser Window 



<SCRIPT LANGUAGE-" JavaScri pt"> 


var newWindow = null ; 


functi on popItUp( ) I 

newWindow = open( "1 i st0702 .htm" , "secondWindow" , 

"scrol 1 bars , resi zabl e,width=500 ,height=400" ) ; 

1 




functi on shutltDownt ) { 

if (newWindow && ! newWindow. closed) { 
newWindow. cl ose( ) ; 

1 




1 

</SCRIPT> 





To create a new browser window and load it with a new document automati- 
cally, you need to use the open ( ) method associated with the wi ndow object, 
as shown in Listing 7-1. As you can see, the open ( ) method accepts three 
parameters: 



The URL that you want to load into the new window (in this case, 
1 ist0702. htm) 

The name for this new window (in this example, secondWi ndow) 
A string of configuration options 

In this example, the window that you create has scroll bars, has a user- 
resizing option, and appears with initial dimensions of 500 x 400 pixels. (A 
quick peek at Figure 7-1 shows you the visible scroll bars. You can verify the 
other characteristics by loading the file 1 i st 0701 . htm from the companion 
CD in your own browser.) 

To close an open window, all you need to do is invoke the wi ndow . cl ose ( ) 
method by using the name of the open window, like so: newWi ndow . cl ose( ) ; . 
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To see a full description of the open ( ) method, check out the following 
Web site: 
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sdn.microsoft.com/l ibrary/default.asp?url=/workshop/author/dhtml/ 
reference/methods/open_0.asp 



Controlling the appearance 
of browser Windows 

In this section, I show you how to customize the windows that you create — 
specifically, how to create multiple windows and how to position new windows 
with respect to existing windows. 

Creating multiple Windows 

Creating multiple windows by using JavaScript is almost as easy as creating a 
single window. The only difference? To create multiple windows, you want to 
create a custom function that allows you to "rubber-stamp" as many windows 
as you want. The code in Listing 7-2 shows you how. 



Listing 7-2: Using a Custom Function to Create Multiple Browser 
Windows 

<SCRIPT LANGUAGE-" JavaScri pt"> 

var newWindow = null ; 

function popItUpCwin) { 

var windowFile = win + ".htm" 
newWindow = open(windowFile, win, 

"scrollbars,resizable,width=500,height=400") ; 

} 

</SCRIPT> 

</HEAD> 
<B0DY> 

<H2>0peni ng multiple browser windows is easy when you use a function that takes 
a parameter. </H2> 

<F0RM> 

<INPUT TYPE="button" VALUE="Open window #1" onCl ick="popItUp( 'one' )"> 
<INPUT TYPE="button" VALUE="Open window #2" onCl ick="popItUp( 'two' ) "> 
<INPUT TYPE="button" VALUE="Open window #3" onCl ick="popItllp( 'three' ) "> 

</F0RM> 
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The code in Listing 7-2 defines a function called popItllpC ) that takes a 
single parameter. When a user clicks the Open Window #1 button, the ' one ' 
ent to the p o p 1 1 U p ( ) function. The p o p 1 1 U p ( ) function uses this 
parameter to identify the name of the window (one) as well as the 
HTML file to open in the window (one . htm). 



You can experiment with the code in Listing 7-2 in your own browser by 
opening the 1 i st0702 . htm file, which you find on the companion CD. 



Positioning neut Windows 

When you open a new browser window, the browser decides where to place 
that window, as shown previously in Figure 7-2. However, you can tell the 
browser exactly where to put it — by using JavaScript, of course! 



The following code shows you one way to do just that: 



var leftPosition = screen. width/2 








var newWindow = window. open( "one. htm" 


, "secondWindow" , 




"width=225,height=200,l 


eft=" + 1 


eftPosition + " ,top=0 


") 



The window placement positions that you can control are 1 eft and top. The 
JavaScript code that you see here calculates the value for the left position — 
in this case, the calculation is equal to half the screen width. The calculated 
value is stored in the variable leftPosition and used as the value of the 
1 eft attribute expected by the wi ndow . open ( ) function. The upshot? The 
left side of the newly displayed window appears exactly halfway across the 
screen. 



Working With Frames 

Scripted frames are a valuable addition to any Web developer's tool belt. By 
using a combination of HTML frames and JavaScript, you can present a static, 
clickable table of contents on one side of a page; then, on the other side of 
the page, you can present the text that corresponds with each table of con- 
tents entry. 

Check out Figure 7-5 to see an example of a simple framed table of contents 
on the left side of the page and content on the right. 

One of the benefits of frames is that they allow you to display different HTML 
files independently from one another. So, for example, as Figure 7-3 shows, 
the left frame stays visible — even if the user scrolls the right frame. Plus, 
clicking a link in the frame on the left automatically loads the appropriate 
content in the frame you see on the right. 
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Savvy new way to market and sell your writing - or a writer's worst nightmare? 

e-publishing 



Electronic publishing, or e-publishing, gives authors the means to promote, sell, and 
distribute their own work - to readers all over the world. 

What an intoxicating democracy. For every manuscript, a publisher! instantly. what Every writer must 
No naif-biting. No waiting years for your dog-eared manuscript to make the rounds of Know About E-Pubiishing 
the top New York publishing houses. No flurries of rejection slips in your mailbox. 

That's quite a contrast to the traditional publishing industry, where strict Btfdt! 
acquisition gatekeepers wield the unilateral power to decide which titles have 
potential and which dont (often based on such literary considerations as whether or 
not you're a celebrity). 

Unfortunately, the low barriers to entry that began and continue to fuel this new 
industry make it possible for any Tom. Dick, or Hany with fifty bucks and a 
phone connection to set up shop as an e publisher And despite wild claims 
that e-publishing has "arrived," the technologies on which e-publishing depends - 
hardware that lets you print and bind a single book on demand, for instance, and 



fX TextPad •[<:... H] 506331 ChO... | !_) C:\Documen... Qj DOS Prompt 



J My Computer 

| *» U:45P 



This approach, which I explain in the following sections, helps users navigate 
through the site quickly and is very useful for organizing small sites — or 
even larger sites that contain mostly text. 
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Creating HTML frames 



Because this book doesn't focus on HTML, I don't go into great detail on cre- 
ating HTML frames. Instead, I show you the basic syntax you need to know to 
understand how JavaScript and the document object model fit into the picture. 
(If you want to know more about creating HTML frames, you might want to 
pick up a copy of HTML 4 For Dummies, 4th Edition, by Ed Tittel and Natanya 
Pitts and published by Wiley Publishing, Inc.) Listing 7-3 shows you an 
excerpt of the code you need to create frames, using the HTM files to hold 
the frames together. The 1 i st0703 . htm file pulls together the pub_l . htm file 
(left frame's table of contents) and the pub_c . htm file (right frame's content). 

You can view the complete working example of the code presented in this 
section by opening these files, which you can find on the companion CD: 

1 i st0703 . htm, pub_l . htm, and pub_c . htm. 
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Listing 7-3: HTML Syntax for Creating Index and Content Frames 
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MESET C0LS=" 125 , *" 

BORDER="0" 
FRAMESPACING="0" 



FRAMEB0RDER="N0"> 
// Defining the source file, name, and display deta 
// for the left frame 
< FRAME SRC="pub_l .htm" 

NAME="leftnav" 

SCR0LLING="AUT0" 

NORESIZE MARGINHEIGHT="0" 

MARG I NW I DTH=" 0 " 

LEFTMARG I N=" 0 " 

TOPMARGIN="0" 

TARGET="body"> 
// Defining the source file, name, and display deta 
// for the right frame 
< FRAME SRC="pub_c.htm" 

NAME="content" 

SCR0LLING="AUT0" 

NORESIZE 

MARGI NHEI GHT=" 0 " 
MARG I NW I DTH= " 0 " 
LEFTMARG I N= " 0 " 
TOPMARGIN="0" 
TARGET="body"> 
</FRAMESET> 



Take a good look at the HTML code in Listing 7-3 to find the two frame 
definitions: 



1 ef tnav (which corresponds to the HTML file pub_l . htm) 
content (which corresponds to the HTML file pub_c .htm) 



The file pub_l . htm contains a list of content links (in other words, a table of 
contents), and the file pub_c . htm contains corresponding text. Figures 7-4 
and 7-5 show you what these two files look like when loaded separately into 
Internet Explorer. (Refer to Figure 7-3 to see what they look like connected.) 

Looking at pages separately, before you put them into frames, helps you 
understand how to combine them for the best effect. 
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Figure 7-4: 

The table of 
contents as 
it appears 
by itself. 




Figure 7-5: 

The text that 
correspond 
s to the 
table of 
contents 
shown in 
Figure 7-4. 
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Savvy new way to market and sell your writing -or a writer's worst nightmare? 

e-publishing 



Electronic publishing, or e-publishing, gives authors the means to promote, sell, and distribute 
their own work - to readers all over the world. 

What an intoxicating democracy. For every manuscript, a published Instantly. No nail-biting. 
No waiting years for your dog-eared manuscript to make the rounds of the top New York publishing 
houses. No flurries of rejection slips in your mailbox. 

That's quite a contiastto the tt.idition.il publishing industry, where strict acquisition 
gatekeepers wield the unilateral power to decide which titles have potential and which dont (often 
based on such literary considerations as whether or not you're a celebrity). 

Unfortunately, the low barriers to entry that began and continue to fuel this new industry make it 
possible for any Tom. Dick, or Hairy with fifty bucks and a phone connection to set up shop 
as an e-publisher. And despite wild claims that e-publishing has "arrived," the technologies on 
which e-publishing depends - hardware that lets you print and bind a single book on demand, for 
instance, and software that restricts electronic downloads to paying customers - are still very 
much in the development stage. 



&\ Done 



j My Computer 



I ^ TextPad - [C, . I! g]5Q6331 CnO... J Q C:\Documen. ■■ | BDOSPrompt 



3j emilyv.com-.. 



Part II: Creating Dynamic Web Pages 



Sharing data between frames 



mple in this section, the content in the frame on the right reloads 
what a user clicks in the left frame. So, naturally, the code that's 
responsible for the text reload can be found in the source code for the left 
frame, pub_l . htm. Take a look at the pertinent syntax shown in Listing 7-4. 
This code snippet, from pub_l . htm, connects the table of contents links to 
the appropriate content. 



Listing 7-4: Connecting the Index Links to the Content Headings 

// When a user clicks the Introduction link, 

// the anchor located at pro_c.htm#top loads into the 

// frame named content 

<A HREF="pro_c.htm#top" TARGET="content" 
>Introduction</A> 




// When a user clicks the Why Can't I Get Published? link, 
// the anchor located at pro_c.htm#cantget loads into the 
// frame named content 

<A HREF="pub_c.htm#cantget" TARGET="content" 
>Why can't I get publ i shed?</A> 

<A HREF="pub_c.htm#rescue" TARGET="content" 
>E-publ i shi ng to the rescue!</A> 

<A HREF="pub_c.htm#types" TARGET="content" 
>The 3 types of e-publ i shers</A> 

<A HREF="pub_c.htm#choose" TARGET="content" 
>Choosing an e-publ i sher</A> 

<A HREF="pub_c.htm#epubGuide" TARGET="content" 
>What Every Writer MUST Know About E-Publ i shi ng</A> 

// When a user clicks the "emilyv.com home" link, a 
// new page (home. htm) replaces the current page 

<A HREF="home.htm" TARGET="_top" 
>emilyv.com home</A> 

Each of the links that I define in Listing 7-4 contains a value for the TARGET 
attribute. Except for the last link, the TARGET attribute is set to content — the 
name of the frame on the right, which is defined in Listing 7-3, shown earlier 
in this chapter. Assigning the name of a frame to the TARGET attribute of a 
link causes that link to load in the named frame, just as you see in Figure 7-3, 
shown previously. 
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Right on target 



/heTTydtr createcT link (or an anchor, area, 
base, or form) in HTML, you have the option of 
specifying a value for the TARGET attribute 
associated with these HTML elements. Valid 
values for the TARGET attribute include any 
previously named frame or window or one of 
the following built-in values. (See Chapter 1 1 for 
an example of specifying the _t op value for the 
TARGET attribute associated with a link.) 



Value What Does It Mean? 

_blank Open the link in a brand-new 
window 

_parent Open the link in this window or 
frame's parent window/frame 

_self Open the link in this window or 
frame 

_top Open the linkinthe rootwindowor 
frame 



You might want to handle the final link in the listing a bit differently. At the 
bottom of Listing 7-4, you see that the last defined link assigns a value of 
_top to the TARGET attribute. When a user clicks the emily.com Home link, 
the page changes to the contents of home . htm. 



^pASr^ _top is a built-in value that translates to "whatever the top-level window in 
* this window/frame hierarchy happens to be." (The sidebar "Right on target" 

in this chapter describes all the built-in values that you can specify for the 
TARGET attribute.) 



If you specify a value for TARGET that doesn't match either a previously 
defined frame name or one of the built-in values that you see in the sidebar 
"Right on target," the associated link loads into a brand-new window. So if 
you expect a link to open in a frame and it pops up in a new window instead, 
check your source code. Odds are you made a typo! 



^ The example in this section shows you how to load the contents of one frame 
based on a user's clicking a link in another. To load two frames based on a 
user's clicking a link, you can create a JavaScript function similar to the 
following: 

function loadTwoFramesdeftURL, contentURL) { 



// Loads the first passed-in URL 

// into the container frame previously defined 

// as "leftNav" in an HTML file such as the one 

// you see in Listing 7-3 



parent.leftNav.location.href=leftURL 
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// Loads the second passed-in URL 
// into the container frame previously defined 
s "content" 



parent.content.location . href=contentURL 
) 

Then pass the 1 oadTwoFrames( ) function two URL strings. For example: 

<A HREF="javascript:loadTwoFrames( 'some. htm' , 'another.htm' )"> 
or 

< I N PUT TYPE="button" VALUE=" Load Two Frames" onClick="loadTwoFrames( 'some. htm' 
'another.htm' )"> 



Don't fence me in! 

Just as you can display other folks' Web pages inside yourframes, so those folks can display your 
Web pages inside f/je/rframes. 

But in some cases, you might want to prevent your site from being framed. For example, say you 
spend weeks creating a beautiful, graphics-rich site optimized for a particular monitor size and 
screen resolution. Then, say I come along and add a link to your site from mine — but I choose to 
display your fabulous, pixel-perfect site by squeezing it into a tiny 2-x-2-inch frame! (Worse yet, 
I'm a cat lover, so I surround the 2-x-2-inch frame with an image of my beloved Fifi — so your site 
appears to be peeking out of my cat's mouth.) 

To prevent other sites from displaying your document in a frame, you can add the following short 
script to your document's head: 

<HEAD> 

(SCRIPT LANGUAGE- "Java Script") 

<!-- Start hiding from non-JavaScript-support browsers 

// If this page has been loaded into a frame... 
if (top != self) 1 

// Replace the original framing page with the framed page 

top. location. href = location. href ; 

1 

// Stop hiding --> 
</SCRIPT> 

</HEAD> 
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In this part . . . 

;n this part, you find practical ways to make your Web 
pages easy for visitors to navigate and use. Chapter 8 
shows you how to create rollovers, hotspots, and navigation 
bars (fancy terms for graphic images that respond when 
users click on or roll their mouses over those images). In 
Chapter 9, you see how to create spiffy pull-down and slid- 
ing menus. Chapter 10 demonstrates how you can describe 
the contents of your site by adding a JavaScript site map, 
and Chapter 1 1 rounds out this part by showing you how to 
create tooltips — helpful hints that appear to your visitors 
when they mouse over a designated area of your site. 



Chapter 8 

Interactive Images 



In This Chapter 

Creating slideshows and other simple animated effects 
Making images clickable by using JavaScript 
Combining clickable images to create interactive navigation bars 
Exploring JavaScript mouse event handlers 



I\ s anyone who's surfed the Web can tell you, a good picture is worth a 
r • thousand words. Images add visual punch to your site. They also let 
you incorporate information that would be downright impossible to present 
in any other way. (Can you imagine trying to describe a collection of antique 
lamps without using photo images?) 

Because images are represented as programmable objects in JavaScript, you 
can go above and beyond the static image by creating interactive images — 
images that respond appropriately when a user clicks or drags a mouse over 
them. Read on for all the juicy details! 



Creating Simple Animations 

Typically, when you see a cool animation on a Web page, you're looking at 
one of the following: 

u* A Java applet: Java applets are small software applications written in 
the Java programming language that your browser downloads from a 
Web server to your machine when you load a page. 

u* A plug-in: A plug-in is special software that you can download that plugs 
in to your browser and allows an application to execute inside a Web 
page. Flash is one popular animation plug-in (from the good folks at 
Macromedia). 
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f An animated GIF: GIF stands for graphics interchange format, and it 
describes a special way of compressing image files. Regular GIF files are 
to transfer images on the Web. Animated GIFs are a bunch of regular 
packaged together — much like those cartoon flipbooks that you 
might have had as a child, where each page contains a separate drawing. 
When you flip the flipbook pages (or load an animated GIF), those sepa- 
rate images flow from one to another to create an animated effect. 

Animated GIFs are a popular choice for Web-based animations because 

• Most browsers support them. 

• No separate download is required (unlike plug-ins). 

• They don't hog a lot of client resources (unlike some Java applets). 

You can create simple animations with JavaScript, as well. You might want to 
do so for two very good reasons: 

v* Creating JavaScript animations saves your users time. (JavaScript ani- 
mations don't require any downloads, either upfront like plug-ins or 
during animation execution like applets.) 

Creating JavaScript animations saves you the trouble of figuring out 
another programming language, such as Java, or figuring out how to 
use an animation construction tool, such as Macromedia's Fireworks. 



The downside? Because JavaScript wasn't designed specifically to create ani- 
mations, it isn't optimized for this purpose — meaning that specially built 
functions and the compression techniques necessary for hard-core animation 
execution don't exist in JavaScript. In other words, JavaScript animations are 
best kept simple. Fortunately, many times, simple animations are all you need! 

In this section, I demonstrate the basis of all animations: the humble image. 

You add an image to a Web page by including the HTML < I MG> tag into your 
HTML source code, like this: 

< I MG SRC="somePicture.jpg" . . . > 




For example, take a look at the HTML snippet shown in Listing 8-1, which 
appears in full on the CD as the file list0801.htm. 



Listing 8-1 : Creating an Image Object with the HTML <IMG> Tag 

<IMG SRC="spl ash. jpg" WIDTH=241 HEIGHT=208 

T I T LE= " Es s ent i a 1 resources for the professional and aspiring writer" 
ALT="Wri ting for the Web splash image" 

> 
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The code you see in Listing 8-1 accomplishes the following tasks: 

J^Iiii^rts an image file named splash.jpg into a space 24 1 pixels wide by 
[\>58)pixels high using the SRC, HEIGHT, and WIDTH attributes of the <IMG> 
tag, respectively. 

Defines a tooltip message by using the TITLE attribute of the <IMG> tag. 

The contents of the TITLE attribute appear automatically when a user 
running Microsoft Internet Explorer 6.x or Netscape Navigator 7.x 
mouses over this image. 

W Defines an alternative text description for the image by using the ALT 
attribute of the < IMG > tag. 

The contents of the ALT attribute appear in browsers that can't display 
images, in browsers that have been configured not to display images, 
and in situations where an image just plain doesn't exist. Figure 8-1 
shows you how the code in Listing 8-1 appears in Internet Explorer 6.0 
with image loading turned off. 
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Figure 8-1: 
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disable 
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loading in 
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browsers 
see the 
contents of 
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ALT or TITLE 
attribute 
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Incorporating images 

This example contains no JavaScript. (Compare it to the interactive JavaScript examples you find in Iist0802.h 
list0803.htm, and list0804.htm ) 



0 Writing for the Web splash image 
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One thing to keep in mind when you create 
interactive images with JavaScript is that users 
have the ability to turn off image loading in their 
browsers. If you rely on an image to convey the 
bulk of your page's information and interactiv- 
ity, and your users have configured their 
browsers so that images don't appear, your 
page will be ineffective, to say the least! 

If you're wondering why a Web surfer would 
choose not to see images, it's because image 
files are relatively large and take a long time to 
download at modest connection speeds. Not 
every user has a cable modem; plenty of users 
are making do with 56K dial-up connections that 
are subject to occasional cutoffs. Because 
images are often gratuitous (yours won't be, I'm 
sure!), users without a lot of time to spend might 
choose to turn off image loading to get their 
online tasks accomplished in the shortest 
amount of time. 



These are the steps your users take to turn off 
image loading: 

Navigator users 

1. Choose EdiK Preferences. 

2. Click the Privacy & Security option. 

3. Click the Images option. 

4. Select the Do Not Load Any Images check 
box. 

Internet Explorer users 

1. Choose Tools 1 : Internet Options. 

2. Click the Advanced tab. 

3. Scroll down to Multimedia and deselect 
the Show Pictures check box. 



Check out Figure 8-1 to see how the line of HTML code in Listing 8-1 appears 
in Internet Explorer 6.0. Placing your mouse cursor over an image in Internet 
Explorer 6.0 or Netscape Navigator 7.1 displays the contents of the image's 
TITLE attribute. 

As you can see from Figures 8-1 and 8-2, the TITLE attribute that you define 
as part of the HTML < I MG> tag provides a bit of interactivity. It displays a 
helpful message automatically when a user running Internet Explorer 6.0 or 
Netscape Navigator 7.1 mouses over the defined image. 

But what if you want more interactivity? What if you want to display your 
helpful message more discreetly — say, at the bottom of the window? (Some 
professional Web designers consider this approach less confusing to Web 
novices than creating a message that temporarily obscures everything 
around the mouse pointer.) What if you want different parts of an image to 
pop up different messages or respond to different mouse clicks? 
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Well, you're in luck: Those scenarios are tailor-made for JavaScript! As you 
see in the following sections, making plain old HTML images interactive is a 
simple matter of adding a few JavaScript event handlers. 



Nov) you see it, novo you don't: 
Turning images on and off 

The simplest animation of all is an image that changes from its original view 
and then changes back again. Take a look at Figures 8-3 and 8-4 to see how 
my smiley face changes, thanks to the recursive invocation of the built-in 
JavaScript function setTimeout( ). 

The relevant code responsible for this simple animation is shown in Listing 8-2 
Check out the simple on/off animation by using image manipulation and the 
built-in JavaScript setTi meout ( ) function. If you want to load and experi- 
ment with the animation example, use the file 1 i st0802 . htm from the com- 
panion CD. 
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Simple on/off animation 



This animated effect is achieved by swapping out preloaded images using JavaScript Note that clicking the stop button on 

your browser does not affect the animation. 



Figure 8-3: 
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Simple on/off animation 



This animated effect is achieved by swapping out preloaded images using JavaScript Note that clicking the stop button on 
your browser does not affect the animation. 




Figure 8-4: 
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Listing 8-2: Creating a Simple Animation with JavaScript's 
setTimeout() Function 



variable declarations 
var whichlmg = 1 
var nextlmage 

///////////////////////////////////////////// 
// The swapO function replaces the image 
// associated with the first input 
// parameter (id) with the image specified 
// for the second input parameter (newSrc). 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

function swapd'd, newSrc) ( 

var thelmage = f i ndImage(document , id, 0); 
if (thelmage) ( 

thelmage. src = newSrc; 



1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
II This function swaps the current image 
// for the incoming parameter newlmage; 
// then it calls itself every second, 
// passing itself a different newlmage 
// each time. The result is a simple 
// on/off animation. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
function animate(newlmage) { 



swap( 'animatedFace' , newlmage); 



if (whichlmg == 1) { 

nextlmage = "surprised.gif" 
whichlmg = 0 

1 

el se { 

nextlmage = "neutral .gif" 
whichlmg = 1 

1 

//setTimeout( ) sets up the continuous swap 
// that creates the animation. 

setTimeout( "ani ma te( next Image) " , 1000 ) 

1 

// stop hiding --> 

</SCRIPT> 

</HEAD> 



(continued) 
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imateO function is called as soon as the page loads. 
Load="animate( 'surprised.gif ' )"> 



//The animation (image) dimensions are defined. 
<IMG NAME="animatedFace" SRC="neutral . gi f " WIDTH="104" HEIGHT="80"> 
</B0DY> 
</HTML> 



The JavaScript code in Listing 8-2 depends on two image files to create the 
animation: 



neutral . g i f : This image of a yellow square contains two black eyes 
and a straight line for a mouth for the neutral look. 

surpri sed . gi f : The image is the surprised face. (Okay, okay, it's just a 
smiley face with a big circle for a mouth instead of a straight line. It's an 
artist's rendition!) 



Here's the order in which JavaScript interpreter steps through the code in 
Listing 8-2 — a peek inside the interpreter's mind, as it were: 



1. The HTML <IMG> tag names and defines the animation placeholder frame 
(the spot on the page where the images appear alternately during the 
animation). 

In the < I M G > tag, the name is animatedFace, and the dimensions are 
104 x 80 pixels. 

2. As soon as the page loads, the onLoad event handler executes the ani - 
m a t e ( ) function and sends it the name of a source file (surprised.gif, 
to be exact). 

3. The a n i m a t e ( ) function calls the s w a p ( ) function to swap out the 
source file associated with the animatedFace placeholder frame. 

Now, instead of the original neut ra 1 . gi f , the animatedFace place- 
holder holds surpri sed . gi f . 

4. By using the globally defined variables w h i c h I m g and nextlmage, the 
ani mate ( ) function logs which image it just swapped out and queues 
up the next image by calling the setTi meout ( ) function. 

The setTimeout( ) function calls the a n i m a t e ( ) function every second, 
alternately passing animate( ) the neutral . gi f and surpri sed . gi f 
filenames. 
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Sometimes you want to set up a slideshow by using JavaScript: a way for your 
users to click a button and see a different image, or slide, without necessarily 
popping to another Web page. 

Figures 8-5 through 8-7 show you the process of clicking a button to change 
the image from one view to another. 



Figure 8-5: 
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default as 
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page loads. 
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Slide show 



This example shows you how to access and manipulate the source file associated with an image using the ouClick event 
handler and the src property of a named image. 
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Slide show 

This example shows you how to access and manipulate the source file associated with an image using the onClick event 
handler and the src property of a named image. 
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Figure 8-7: 
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This example shows you how to access and manipulate the source file associated with an image using the onClick event 
handler and the src property of a named image. 
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The JavaScript code that's necessary to create the simple slideshow example 
appears in Listing 8-3. 

in Listing 8-3 is located on the companion CD in the list0803.htm 
file. 



Listing 8-3: Creating a User-Activated Slideshow 



///////////////////////////////////////////////// 

// This swapO function constructs a filename 
// based on the input parameter and then sets 
// the slideshow image's source to that 
// filename. 
// 

// Note: The initial image determines the size 
// of the slideshow "frame". Swapping to 
// a larger image causes that larger image to 
// be squeezed to fit the initial image "frame". 
///////////////////////////////////////////////// 
function swap(newlmage) { 

var fileName = newlmage . toStri ng( ) + ".gif" 
document. slideshow. src = fileName 

} 

// stop hiding --> 

</SCRIPT> 

</HEAD> 

<B0DY> 

<Hl>Slide show</Hl> 

This example shows you how to access and manipulate the source file associated 
with an image using the <B>onC 1 i ck</B> event handler and the 
<B>src</B> property of a named image. 



<!-- The initial image (a face) to display is specified here. --> 

<IMG NAME="sl ideshow" SRC="neutral .gif" WIDTH="104" HEIGHT="80"> 
<P> 

<!-- These three onClick event handlers call the swapO function to display the 
user-selected image --> 

<INPUT TYPE="button" VALUE=" Pi cture #1" onCl i ck="swap( ' 1 ' ) "> 

<INPUT TYPE="button" VALUE=" Pi cture #2" onCl i ck="swap( ' 2 ' ) "> 

<INPUT TYPE="button" VALUE=" Pi cture #3" onCl i ck="swap( ' 3 ' ) "> 



Part III: Making Your Site Easy for Visitors to Navigate and Use 



OBOG 



See the < IMG > tag near the bottom of the Listing 8-3 code listing? That <IMG> 
tag defines the initial image that displays when this page first appears, 
in Figure 8-5, and names the placeholder for that initial image 
w. 



When a user clicks any of the buttons — Picture #1, Picture #2, or Picture 
#3 — that button's on CI i ck event handler springs into action and calls the 
swap( ) function, passing the swap( ) function the appropriate number: 1, 2, 
or 3. Inside the swap( ) function are just two lines of JavaScript code: 



var fileName = newImage.toStri ng( ) + ".gif" 
document. si ideshow.src = fileName 



The first line creates a variable called f i 1 eName and then assigns to f i 1 eName 
astringbasedonthe parameter sent toswapO fromtheonClick event han- 
dler. (You must use the toStri ng ( ) method to convert the value of newlmage 
to a string before you can tack on the .gif.) After the JavaScript interpreter 
interprets this first line, f i 1 eName contains one of the following string values: 
1 . gi f , 2 . gi f , or 3 . gi f . (These filenames correspond to actual GIF files located 
on the companion CD.) The second line of the swap( ) function assigns this 
new f i 1 eName to the built-in src property of the slideshow placeholder. 
(You specify a particular image placed in a document by navigating from the 
document object to the al 1 object to the named Image object.) 



Creating Rottoi/ers, Hotspots, 
and Navigation Bars 

Interactive images help you communicate with your users quickly and easily. 
Three of the most popular approaches to creating interactive images on the 
Web are 

f" Rollovers: A rollover is an image that changes appearance when a user 
rolls the cursor over it. Rollovers are typically associated with links, so 
that when a user clicks a rollover, the user's browser loads a new Web 
page. 

Hotspots: A hotspot is similar to a rollover except that a hotspot refers 
to an interactive portion of an image. You can carve up a single image to 
create multiple hotspots. 

Navigation bars: Finally, a navigation bar is a group of links — typically 
displayed as rollovers or as hotspots — that allow your users to surf to 
all the pages of your Web site. 



Chapter 8: Creating Interactive Images 

The following sections show you how to create these cool effects with 
JavaScript. 

DropBooks 

Creating a simple rollover 

The term rollover describes an image that changes color, font, size, or some 
other aspect when a user rolls over it with the mouse pointer. Figure 8-8 
shows the E-Publishing button as it appears (white) when first loaded into 
Internet Explorer. 

As you can see in Figure 8-9, rolling the mouse over a navigation button that 
you implement as a rollover provides a visual cue that helps users recognize 
what they can expect when they click the mouse button. (The change in text 
color from white to purple lets users know in no uncertain terms that they're 
hovering over a button!) 

Rollovers are most often used to create navigation bars, but you can use 
rollovers to make any graphic portion of your Web site respond to mouse 
events. 
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Creating a mouse rollover is fairly simple. Just follow this plan: 

1. Select two images of precisely the same size: one to display by default, 
and one to display in response toamouseOver event. 




One way to keep the two versions straight is to use on/off terminology. 
From now on I refer to these images as the off image and the on image, 
respectively, because one appears when your mouse is resting some- 
where off the image and one when your mouse is on it. 



You can get images one of two ways: 

• You can use predesigned images. Many graphics tools come com- 
plete with a library of predesigned images; you can also find images 
online — some free, some for purchase. 

• You can create your own images by using an image-creation tool, 
such as Paint Shop Pro 6 or later. (You can find a trial copy of Paint 
Shop Pro 6 on the companion CD-ROM.) 



One popular approach is to create a navigation button that you like and 
save it as the off image — then change the color of the button and imme- 
diately save another copy as the on image. 
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Not graphically inclined? GoGraph offers freely downloadable icons and 
graphics at www . gograph .com. 

te two JavaScript functions, one attached to the onMouseOver 
t handler and one attached to the onMouseOut event handlers. 

The following are two examples that use the custom swap ( ) function to 
swap the image named mkt_pi c from the white version (mkt_w . gi f) to 
the purple version (mkt_p . gi f). 

<A HREF="mkt. htm" 

// Example #1: Swapping from white to purple on mouseOver 
onMouseOver="swap( 'mkt_pic' , 'mkt_p.gif ) ; 

// Example #2: Swapping from purple to white on mouseOut 
onMouseOut="swap( 'mkt_pic' , 'mkt_w.gif ) ; 
displ ayMsg( ' ' ) ; return true" 

IMG NAME="mkt_pic" SRC="mkt_w.gif " WIDTH="72" 
HEIGHT="12" B0RDER="0"X/A> 

You can find a working version of the code responsible for Figures 8-8 
and 8-9 — which includes the swap ( ) function as well as the following 
JavaScript code — on the companion CD, inthefilerollover.htm. 

3. Add an optional (but recommended) JavaScript function that preloads 
all of the images. 

Preloading images helps ensure that when users mouse over images for 
the first time, they don't have to wait while additional images download 
from the Web server one at a time. 



I show you how these three steps work together in the following section, 
where you see how to construct a typical navigation bar with rollover effects 
step by step. 



Creating navigation bars by 
putting rollovers together 

Navigation bars, such as the one shown previously in Figures 8-8 and 8-9, are 
wonderful tools for helping your users find their way around your Web site. 
Fortunately — because navigation bars are nothing more than a collection of 
rollovers combined with links to different Web pages — they're also pretty 
easy to put together, as you see in the following sections. 

The approach to navigation bar creation that I demonstrate in this chapter is 
the old-fashioned, code-by-hand approach. Point-and-click visual tools, such 
as Macromedia Dreamweaver, make the process of creating navigation bars 
even more straightforward and painless. 
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Preloading images 

You aren't required to preload your rollover images, but doing so is a good idea, 
loaded images makes your rollovers work much more smoothly, 
turn gives your visitors a much better impression of your site. 



So, why is preloading images a good idea? By default, browsers fetch images 
only when they're needed for display the first time. So, by default, browsers 
don't bother to fetch on images until a user mouses onto a rollover for the 
very first time. Unfortunately, if the user's connection is slow or the Web 
server is overloaded, that fetched image can take quite a while to arrive. In 
the meantime, the browser display doesn't change, and the user doesn't get 
to see the rollover effect. 

Preloading all images helps ensure that users see your rollover effects right 
away. To preload images, you simply create instances of the Image object by 
using JavaScript, and then you fill those instances with the names of the image 
files that you want to preload. You do all this as soon as the page loads; that 
way, while the user is busy reading the text on your Web page, the images are 
quietly loading in the background. By the time the user is ready to click an 
image, all the on images are loaded in memory and ready to go! 

I break down this next example in three chunks to help clarify what's happen- 
ing. Listing 8-4 shows you how to preload images by using a custom function 
called, appropriately enough, preloadlmagesO. Watch the comments for 
the stages of the process, which I outline following the listing. 



Listing 8-4: Preloading Images as Soon as the Web Page Loads 

function preloadlmagesO { 

// See Step 1 in the following text 

if (document. images) I 

// See Step 2 in the following text 

var imgFiles = prel oadlmages . arguments; 

// See Step 3 in the following text 

var preloadArray = new ArrayO; 

// See Step 4 in the following text 

for (var i-0; i < imgFiles. length; i++) ( 

// Create a new Image object in the 
// preloadArray array and associate it 
// with a source file, thus loading 
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// that image into memory. 

prel oadArray[i ] = new Image; 
preloadArray[i].src = imgFiles[i]; 



</SCRIPT> 
</HEAD> 

<B0DY BGC0L0R="#000000" TEXT="#FFFFFF" LINK="#FFFFFF" VLINK="#CCCCFFF" 

ALINK="#CCCCFFF"> 
// This second script calls the prel oadImages( ) function 
// defined in the first script. 

<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
<!- 

// Preload all the images used in this file 
// (the logo, plus all white and purple 
// navigation buttons). 

// See Step 5 in the following text 

preloadlmagest 'logo. jpg' , 

'pro_p.gif, 'pub_p.gif, 'mkt_p.gif', 'crs_p.gif, 
'res_p.gif, 'who_p.gif, 'pro_w.gif, 'pub_w.gif, 
'mkt_w.gif, 'crs_w.gif, 'res_w.gif, 'who_w.gif'); 

//-> 
</SCRIPT> 

The code in Listing 8-4 begins with the definition of the preloadlmagesO 
function. 

Here's how the JavaScript interpreter steps through this function: 

1. The interpreter checks the document . images property to see whether 
any image placeholders (<IMG> tags) appear for this document. 

2. If one or more <IMG> tags exist in this document, the interpreter creates 
a variable called i m g F i 1 e s containing all the arguments sent to the 

prel oadlmages ( ) function. 

The a rguments property is automatically available for every function 
that you create. 

3. The interpreter creates a new variable, called prel oadArray, by calling 
the new operator in conjunction with the built-in JavaScript Array ( ) 
constructor. 

The result is an empty array. 
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The interpreter fills the empty preloadArray array and preloads all the 
images necessary for this Web page. 



interpreter creates new instances of the Image object and then 
ediately associates them with the names of the image files passed 
into the prel oadlmages ( ) function. 




5. The second script that you see in Listing 8-4 — the one placed between 
the document <B0DY> and </B0DY> tags — executes as soon as users 
load the Web page into their browsers. 

This script calls the prel oadlmages ( ) function, passing to it all of the 
image files necessary for this page. The upshot? As soon as the page 
loads, JavaScript immediately begins preloading all the navigation bar 
images. 

You might find it helpful to distinguish your on/off image files by using a 
simple tagging system in the filenames. The filenames in this example 
containing _w represent white navigation buttons; _p indicates the purple 
navigation buttons. So, in this example, pro_p . gi f is the name of the off 
image for the E-Promotion navigation button, and pro_w . gi f is the name of 
the corresponding on image for the E-Promotion navigation button. 



Swapping images on rottotfer 

As soon as the user's browser loads your rollover images into memory by 
using a scheme like the one that you see in the preceding section, you need 
some way to swap those images out in response toamouseOver event. You 
do this by using the onMouseOver event handler associated with each naviga- 
tion button. A detailed explanation follows the listing. 



Listing 8-5: Using the mouseOver Event to Swap Images 

<HEAD> 

<SCRI PT LANGUAGE=" JavaScri pt" TYPE="text/javascri pt"> 



// Defining the swapO function 
function swaptid, newsrc) ( 

var thelmage = locatelmage(id) ; 

if (thelmage) ( 

thelmage. src = newsrc; 

) 

1 



////////////////////////////////////////////////////// 
// The 1 ocatelmaget ) function accepts the name of an 
// image and returns the Image object associated 
// with that name. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 



function locatelmage(name) I 
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var thelmage = false; 
if (document. images) I 

thelmage = document. images[name] ; 



if (thelmage) { 

return thelmage; 

) 

return (false); 



</SCRIPT> 
</HEAD> 

<B0DY> 



<A HREF="pro.htm" 

onMouseOut="swap( 'promo_pic' , 'pro_w.gif )" 

//Calling the swapO function from an onMouseOver event handler 



onMouseOver="swap( 

SRC 


'promo_pic' , 'pro_p.gif ' )" XIMG NAME="promo_pi c" 
= "pro_w.gif" WIDTH="81" HEIGHT="1Z" B0RDER="0"X/A 


> 











To help you wade through the code in Listing 8-5, 1 explain how the swap ( ) 
function works first; then, I explain what happens when you call the swap ( ) 
function from the onMouseOut and onMouseOver event handlers. 



befitting the sulap ( ) function 

The swap ( ) function that you see defined in Listing 8-5 accepts two arguments: 

If i d, which represents the name of the image that you want to swap 
i>* newsrc, which represents the filename of the new image that you want 
to display 

Here's what's going on inside the body of the swa p ( ) function: 

First, a variable called thelmage is created and assigned the preloaded Image 
object that you want to swap out. (To create thelmage, the 1 ocateImage( ) 
function is used. I explain the inner workings oflocatelmageO in the next 
section.) 

Second, the filename of thelmage is changed, which causes the browser to 
display the new image. Image swap complete, as shown here: 

function swaptid, newsrc) { 

var thelmage = locatelmage(id) ; 
if (thelmage) { // if an image was found 
thelmage. src = newsrc; // swap it out 
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ou're interested in how the 1 ocatelmage ( ) function works, you've come 
ht place. As you see in the preceding section, the swap ( ) function 
'ate I mage ( ) to, well, to locate the image it needs to swap out. 



Here's the code for the locateImage( ) function: 



function locatelmage(name) I 
//Start with a blank variable called thelmage 
var thelmage = false; 

// If there are images defined for this document . . . 

if (document. images) I 
// Assign the image we're looking for to thelmage. 

thelmage = document. images[name] ; 

1 

// If thelmage exists, return it to the calling function. 

if (thelmage) ( 

return thelmage; 

) 

// Otherwise, return false (0) to the calling function. 

return (false); 

1 



Catting the sulap () function 

To perform a rollover, you must swap out images two different times: when a 
user mouses onto an image, and when a user mouses off again. You do this by 
calling the swap ( ) function from both the onMouseOver and onMouseOut 
event handlers, as shown in the following Listing 8-5 excerpt: 

// Because the image is implemented as a link, clicking 
// the image automatically loads the pro. htm file. 

<A HREF="pro.htm" 

onMouseOut="swap( 'promo_pic' , 'pro_w.gif )" 
onMouseOver="swap( 'promo_pic' , 'pro_p.gif )" > 

<IMG NAME="promo_pic" SRO"pro_w.gif" WIDTH="81 " HEIGHT="12" BORDER="0"> 

</A> 



Notice in this code that the initial value for the E-Promotion image source is 
pro_w . gi f (the white button); the name of the image is promo_pi c. (You 
know these things because the SRC attribute of the <IMG> tag is set to 
pro_w . gi f and the NAME attribute of the <IMG> tag is set to promo_pi c.) 

Now take a look at the onMouseOver event handler. This statement swaps the 
promo_pi c image from the white version to pro_p . gi f (the purple version). 
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When the onMouseOut event handler fires, the promo_pi c image changes 
back again to pro_w . gi f (back to the white version). Thanks to the HTML 
% when the user clicks the image, the user's browser loads a new Web 
ioted to all things promotional: pro . htm. 



Carving up a single image 
into multiple hotspots 

HTML areas (and their associated event handlers) let you carve up images into 
multiple image hotspots, areas of an image that correspond with a message or 
action (see Listing 8-6). Mousing over the section of the image marked Publish, 
as shown in Figure 8-10, causes a publishing-related message to appear in the 
status bar. Figure 8-1 1 shows a similar trick for a different section of the image. 
And, you can designate a larger area for a more general message on the status 
bar (see Figure 8-12). Note: If you're running Internet Explorer and don't see the 
status bar, choose ViewOStatus Bar. 



Figure 8-10: 

The status 
bar 
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corresponds 
to the 
location of 
the mouse 
on a page. 
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Figure 8-11: 
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One image, multiple event handlers 

Rolling your mouse pointer over the different parts of this image causes different messages to display at the bo 
window (in a property of the window called the status bar). 
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Listing 8-6 (1 i st0806 . htm) shows you how to create a customized message 
to display on the status bar when a user mouses over a specific area of an 



oks 
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<TITLE>Attachi ng multiple event handlers to a single image (from JavaScript For 
Dummies, 4th Edi ti on )</TITLE> 



</HEAD> 

<B0DY BGC0L0R="black" TEXT="whi te"> 
<Hl>0ne image, multiple event handl ers</Hl> 

Rolling your mouse pointer over the different parts of this image causes 

different messages to display at the bottom of the window (in a 
property of the window called the <B>status</B> bar). 

<P> 

<HR> 

<P> 

<CENTER> 
<!-- 

The HTML areas "carve" up a single image. Defining separate event handlers for 
each area lets you display a different message in the window's 
status bar depending on where a user's mouse moves or clicks. 

-> 



<IMG hei ght=208 src="splash.jpg" width=241 

useMap=#newspl ash border=0> 
<MAP name=newspl ash> 



<AREA 

onMouseOver="window.status='Writing for the Web'; return true" 
onMouseOut="window.status=' ' ; return true" 
shape=POLY target=_top 

coords = l, 2, 1,46, 78, 48, 80, 197, 240, 201, 239, 18, 93, 12, 94, 2 

> 



<AREA 

onMouseOver="window.status='SELL your writing'; return true" 
onMouseOut="window.status=' ' ; return true" shape=RECT target=_top 
coords=216, 0,241, 16 
> 



<AREA 

onMouseover="window.status='PROMOTE your writing'; return true" 
onMouseout="window.status=' ' ; return true" shape=RECT target=_top 
coords=149, 0,209, 15 
> 

<AREA 

onMouseOver="window.status='PUBLISH your writing'; return true" 



(continued) 
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</MAP> 



onMouseOut="window.status=' ' ; return true" shape=RECT target=_top 
coords=94, 0,140, 14 



</CENTER> 

</B0DY> 

</HTML> 



HTML areas are the constructs that let you carve an image into separate 
pieces. The image itself stays where it is, and the areas that you define just 
let you define arbitrary ways of interacting with that image. 

You can define as many areas for an image as you want, sized and shaped 
however you like (courtesy of the coords attribute). You define an area by 
using the HTML <AREA> and <MAP> tags, as shown in Listing 8-6. Each area 
gets to define its own event handlers. 



Four separate areas are defined in Listing 8-6: 



f* The portion of the image that says Publish. The onMouseOver event 
handler associated with this area displays the message PUBLISH your 
wri ti ng. 

f* The portion of the image that says Promote. The onMouseOver event 
handler associated with this area displays the message PROMOTE your 
wri ti ng. 

The portion of the image that says Sel 1 . The onMouseOver event handler 
associated with this area displays the message SELL your writing. 

The rest of the image not described by the preceding areas. The 
onMouseOver event handler associated with this leftover area displays 
the generic message Wri ti ng for the Web. 

To add a link to a hotspot, all you need to do is define a value for the HREF 
attribute of the <AREA> tag, as the following code shows: 

<AREA 

onMouseover="window.status='PROMOTE your writing'; return true" 
onMouseout="window.status=' ' ; return true" shape=RECT target=_top 
coords=149, 0,209, 15 href="http: //www. somePromotionPage.com" 

> 



To create distinct areas within an image, you need to know the x,y coordinates 
that describe that area. Most graphic-manipulation tools on the market today, 
including Macromedia Fireworks and Adobe ImageReady, allow you to import 
a picture, outline which areas you want to create, and then — boom! — they 
generate the necessary coordinates for you. 
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In This Chapter 

Using DHTML to create pull-down menus 

Creating dynamic sliding menus 

Taking advantage of third-party DHTML menu tools 



m jynamic HTML, or DHTML, refers to the collection of client-side lan- 
W>f guages and standards that you use to create Web pages that change 
appearance dynamically after they're loaded into a user's Web browser. 

The languages and standards that contribute to DHTML include 

V HTML 

«* JavaScript 

v* Cascading style sheets 

The document object model (DOM) 

My focus in this chapter is on JavaScript and the document object model and 
how they combine to contribute to DHTML — in short, how you can use 
JavaScript to access and manipulate the DOM and create cool dynamic 
effects, including pull-down and sliding menus. I also steer you toward a 
handful of third-party menu components (in case you'd rather purchase and 
customize menus than code them yourself). 

Although the examples in this chapter include HTML and cascading style sheet 
code, I don't spend a lot of time describing these two languages in depth. If 
you're interested in finding out more about DHTML, including HTML and cas- 
cading style sheets, you might want to check out a good book devoted to these 
subjects. One worth checking out is Dynamic HTML: The Definitive Reference, 
2nd Edition, by Danny Goodman (O'Reilly & Associates). 

Chapter 4 describes the document object model (DOM) and shows you how 
to access it. Appendix C presents both Internet Explorer's and Netscape 
Navigator's DOMs. 




Part III: Making Your Site Easy for Visitors to Navigate and Use 



Getting Acquainted With Menus 



Mtunq At 

dBooks 

of ODtions 



Web-speak is much the same as a menu in a restaurant: a collection 
of options. Menus help you organize your content attractively — and help 
your users find what they're looking for quickly and easily. Figure 9-1 shows 
you an example of a simple menu. 

Because menus typically involve dynamic content positioning and hiding, you 
don't create menus by using JavaScript alone; instead, you use DHTML — a 
combination of HTML, cascading style sheets, JavaScript, and the DOM. In the 
following sections, I demonstrate two types of menus: pull-down menus and 
sliding menus. 



Putt-douJn menus 

If your computer runs Windows, you might be familiar with pull-down menus: 
Click a menu item, and additional items appear. 



Figure 9-1: 
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Pull-down menus, such as the one that you see in Figure 9-2, are useful because 
they allow you to organize your Web content efficiently — and because they're 
;cted. In other words, the menu display doesn't change until a user 
mouse. Because many users are familiar with pull-down menus — 
and because many users prefer Web page interfaces that don't change until 
they direct it to change by clicking something — pull-down menus are a popu- 
lar approach to menu creation. 



Figure 9-2: 

A simple 
pull-down 
menu 
allows users 
to choose 
additional 
menu items. 
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The code in Listing 9-1 creates the pull-down menu that you see in Figure 9-2. 
As you peruse the code, notice that much of the code is HTML and style 
sheet code. The only JavaScript code that you see consists of: 

IV The custom function di spl ayMenuC ) 
V Two calls to d i s p 1 a y M e n u () associated with the o n C 1 i c k event han- 
dlers for the two expandable menu options, Resources and Books 




You can find the working code in Listing 9-1 on the companion CD under the 
filename 1 i st0901 . htm. 



Listing 9-1: Creating a Simple Pull-Down Menu 

<HTML> 
<HEAD> 

<TITLE>Using DHTML to Create Pull-down Menus (From JavaScript For Dummies, 4th 

Edition )</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from older browsers 

function displayMenu(currentMenu) I 

var thisMenu = document. getElementByld(currentMenu) .style 

(continued) 
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//_Custom JavaScript function that expands/contracts menus as 
ppropri ate 

T the menu is expanded, contract it 
if (thisMenu. display == "block") I 
thisMenu. display = "none" 



el se { 

// If the menu is contracted, expand it 
thisMenu. display = "block" 

) 

return false 



// End hiding--) 
</SCRIPT> 

<STYLE TYPE="text/css"> 

<!-- 

// Style definition of the "menu" class 
.menu (di spl ay : none ; ma rg i n - 1 eft : 20px ) 

--> 

</STYLE> 

</HEAD> 

<B0DY BGC0L0R="#FFFFFF"> 

<Hl>Help With JavaScri pt</Hl> 

<H2>( Click to expand/contract a category)</H2> 

<H3> 

// Call to display resource menu. 

<a href="dummyl . html " onCl ick="return displayMenu( 'resMenu' )">Resources</a> 
</H3> 

<span class="menu" id=°resMenu"> 

<a href=" jhttp: //channel s .netscape.com/ns/browsers/defaul t.jsp">JavaScri pt doc 
(NavX/aXbr /> 

<a href = " h 1 1 p : / /www. mi crosoft.com/windows/ie/default. htm" >JavaScript doc 
(IEX/aXbr /> 

<a href="http: //www.mozi 1 1 a .or g/docs/dom/domref/dom_s hortTOC.html ">DOM 
(NavX/aXbr /> 

<a href =" http : //msdn.mi crosoft.com/workshop/author/dhtml /reference/objects .asp" > 

DOM (IEX/aXbr /> 
<a href="http: //www. scri ptsearch.com/JavaScri pt">Scri ptSearch</a><br /> 
</span> 



<H3> 
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// Call to display book menu. 

<i href="dummy2 . html " oncl ick="return displayMeniK 'bookMenu' )">Books</a> 



<span cl ass="menu" id="bookMenu"> 

<a href="http://www. dummies. com">Dummi es</a><br /> 
<a href="http://www.powells.com">Powells</aXbr /> 
http: //www.amazon.com">Amazon</a><br /> 
http: //www. ebay .com">eBay</a><br /> 
http://www.bn. com">Barnes & Noble</aXbr /> 



<a href 
<a href 
<a href 
</span> 
</B0DY> 
</HTML> 



Unless you're an HTML and CSS guru, the code in Listing 9-1 might seem 
daunting. Not to worry! Taken a step at a time, the code unravels. The follow- 
ing four items (which are boldface in the code in Listing 9-1) are the most 
important: 

V The JavaScript di spl ayMenu( ) function. The di spl ayMenu( ) function 
accepts a single parameter representing the current menu. 

1 . The JavaScript code inside the displayMenuO function gets the 
document object associated with the current menu and stores it in 
the variable called thi sMenu. 

2. The code uses the thi sMenu object's di spl ay property to deter- 
mine whether the current menu is expanded or contracted. 

3. If the current menu is expanded, the code contracts it; if the cur- 
rent menu is contracted, the code expands it. 

V The cascading style sheet definition of the menu class. The HTML 

<STYLE> tags define a class of style sheet called menu. Every HTML com- 
ponent associated with the menu class (see the last bullet in this list) 
shares the display characteristics defined between the <STY LE> tags. 

V The JavaScript calls to the displayMenuO functions that are associ- 
ated with each of the onCl i ck event handlers: one for the Resources 
hyperlink and one for the Books hyperlink. When users click either the 
Resources or Books hyperlink shown in Figure 9-2, the JavaScript code 
associated with the onCl i ck event handler for each of these hyperlinks 
sends the current menu to the di spl ayMenu ( ) function, causing the 
current menu to contract (if it's already expanded) or expand (if it's 
contracted). 

i>* The HTML definition of the resMenu and bookMenu layers. Each of 
these layers, which are defined using the HTML <span> tag, associates 
the layer itself with the CSS menu class. The result? 
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• The browser displays both the resMenu and bookMenu layers by 



using the same menu class definition. 



Both the resMenu and bookMenu layers are stored as document 
objects whose di spl ay property is accessible (and manipulable) 
via JavaScript. 

The first item in this list has more information on the di spl ay property. 

HTML and CSS are broad, complex topics. If you'd like more in-depth info on 
these topics than I present here, WebDeveloper.com offers a wealth of free 
HTML and CSS resources. Check them out at http : //webdevel oper .com/ 
html and http://webdeveloper.com/html/html_css_links.html, 
respectively 



Sliding menus 

Sliding menus differ from pull-down menus in one important way: In a sliding 
menu, menu options appear dynamically in response to a mouseOver event. 
In other words, when it comes to sliding menus, users don't have to click a 
menu item to see additional menu items; all they have to do is move their 
mouses over an item, and bingo! More items appear, as if by magic. 

The menu shown previously in Figure 9-1 is a sliding menu, and so is the 
menu that you see in Figure 9-3. 



Figure 9-3: 

Mousing 
over a 
sliding menu 
causes the 
menu to 
display 
additional 
menu items. 
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Take a peek at the code in Listing 9-2, which creates the sliding menu shown 
in Figure 9-3. (It's a bit ugly, but I describe the important parts in detail in the 
remainder of this section.) As you glance through the code, notice a single 
JavaScript function — displayMenu( ) — as well as calls to di spl ay Menu ( ) 
associated with the onMouseOver and onMouseOut event handlers . 
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I've included the working code in Listing 9-2 on the companion CD under the 
filenamelist0902.htm. 



-2: Creating a Sliding Menu 



<HTML> 
<HEAD> 

<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th 

Edition)</TITLE> 
<SCRIPT LANGUAGE-" JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from older browsers 

// Custom JavaScript function di spl ayMenut ) 
function displayMenu(currentPosition,nextPosition) { 

// Get the menu object located at the currentPosition 
// on the screen. 

var whichMenu = document. getElementByld(currentPosition) .style; 

if (di spl ayMenu . arguments . 1 ength == 1) I 

// Only one argument was sent in, so we need to 
// figure out the value for "nextPosi ti on" 

if (parselnt(whichMenu.top) == -5) I 
// Only two values are possible: one 
// for mouseOver 

// (-5) and one for mouseOut (-90). So we want 
// to toggle from the existing position to the 
// other position: for example, if the position 
// is -5, set nextPosition to -90... 
nextPosition = -90; 

1 

el se { 

// Otherwise, set nextPosition to -5 
nextPosition = -5; 



// Redisplay the menu using the value of "nextPosition" 
whichMenu. top = nextPosition + "px"; 



// End hiding--) 

</SCRIPT> 

// Style sheet definition 
<STYLE TYPE="text/css"> 

<!-- 



(continued) 
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osition:absolute; font:12px arial, helvetica, sans-serif; background- 
col or :#CCCCCC; layer-background-col or:#CCCCCC; top:-90px} 
'#eiyi {leftrlOpx; width:130px} 
#bookMenu {1 eft: 145px; width :160px} 
A {text-decoration:none; color:#000000} 
A:hover {background-col or : pi nk; color:blue} 



--> 



</STYLE> 

</HEAD> 



<B0DY BGC0L0R="white"> 



// Associating the call to di spl ayMenu( ) with the onMouseOver and onMouseOut 
// event handlers. 

<div id="resMenu" class="menu" onMouseOver="displayMenu( ' resMenu' , -5) " 
onMouseOut="displayMenu( ' resMenu' , -90)"><br /> 

<a href=" jhttp: //channel s .netscape.com/ns/browsers/defaul t.jsp">JavaScri pt doc 

(NavX/aXbr /> 

<a href="http: //www. micros oft .com/windows/ ie/default. htm" >JavaScript doc 

(IEX/aXbr /> 

<a href="http: //www.mozi 11a. or g/docs/dom/domref /dom_s hortTOC.html ">DOM 

(NavX/aXbr /> 

<a 

href =" http : //msdn.mi crosoft.com/workshop/author/dhtml /reference/ob 

jects.asp">DOM (IEX/aXbr /> 
<a href="http: //www.scri pt search .com/JavaScri pt">ScriptSearch</a><br /> 
<b><a href="javascript:displayMenu( 'resMenu' ) ">JavaScri pt Resources</aX/b> 
</div> 



// Associating the call to di spl ayMenu( ) with the onMouseOver and onMouseOut 
// event handlers. 

<div id="bookMenu" class="menu" onMouseOver="displ ayMenut 'bookMenu' , -5)" 
onMouseOut="displayMenuC'bookMenu' ,-90)"><br /> 

<a href="http: //www. dummies. com">Dummi es</a><br /> 

<a href="http://www.powells.com">Powells</a><br /> 

<a href="http://www.amazon.com">Amazon</aXbr /> 

<a href="http: //www.ebay.com">eBay</a><br /> 

<a href="http://www.bn.com">Barnes & Noble</aXbr /> 

<b><a href="javascript:displayMenu( 'bookMenu' ) ">JavaScri pt Books</aX/b> 

</div> 



</BODY> 
</HTML> 
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ading style sheets: When you create a sliding menu, you use a style 
t to define such display characteristics as how you want the browser 
to display the menu before a user mouses over it and after a user mouses 
over it and what color you want the hyperlinks to be. 

**" Display screen (monitor) properties: You use screen properties to spec- 
ify where you want the browser to display the menu initially, as well as 
after a user mouses over the menu. 

V JavaScript: You use JavaScript to tie the menu display (the first bullet 
in this list) and positioning (the second bullet) to the onMouseOver and 
onMouseOut event handlers associated with the menu options. When 
users mouse over a menu option, as shown in Figure 9-3, the menu auto- 
matically appears — and then disappears after the mouse pointer moves 
away. 

As you examine the code shown in Listing 9-2, pay special attention to the fol- 
lowing three callouts, which implement the preceding three points: 

The custom JavaScript function di spl ayMenu( ). The di spl ayMenu( ) 
function accepts up to two parameters: currentPosition and 
nextPosition. The JavaScript code uses these parameters to deter- 
mine where on the screen to display the menu. If only one parameter 
was sent to the di spl ayMenu ( ) function, the code calculates the 
value of the second parameter by determining whether the menu is 
currently expanded or contracted — and then the code displays it the 
opposite way. 

The style sheet definition describing how the browser should display 
menus. All the code between the <STY LE> and </STY LE> tags consti- 
tutes the cascading style sheet definition: 

• Display characteristics common to both menus appear next to the 
.menu keyword. 

• Display characteristics specific to the Resources menu appear next 
to the #resMenu keyword. 

• Display characterstics specific to the Books menu appear next to 
the #bookMenu keyword. 

• Display characteristics for the hyperlink menu items — as well as 
the hyperlinks when a mouse is positioned over them — appear 
next to the A and A : hover keywords, respectively. 
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The JavaScript calls to di spl ayMeniK ) associated with the onMouseOut 
and onMouseOver event handlers. The HTML <di v> and </di v> tags 
ify how the browser is to display the Resources and Books menus ini- 
but it's the JavaScript calls to the di spl ayMenu( ) function, asso- 
ciated with both the Resource hyperlink's onMouseOut and onMouseOver 
event handlers and the Books hyperlink's onMouseOut and onMouseOver 
event handlers, that cause the menus to slide open and closed. 



Taking Advantage of Third-Party 
DHTML Menu Components 

As you might notice if you peruse Listings 9-1 and 9-2, creating DHTML menus 
from scratch takes quite a bit of programming savvy, not just with respect to 
JavaScript but to HTML and cascading style sheets, as well. If you don't want 
to invest the time and trouble in coding DHTML menus by hand (and not 
everyone does), you're in luck: Several companies offer tools that you can 
use to get cool menu effects with a minimum of effort. The following list rep- 
resents just a handful of the products available. (Many are low cost or offer 
free trial versions.) 

OpenCube's Visual QuickMenu Pro is a point-and-click tool you can use 
to create customized menus quickly and easily. You must be running 
Windows to create your menus using Visual QuickMenu Pro, but the 
menus you create run on multiple browsers. You can find a free trial 
version of this product at www . opencube .com. 

Milonic Solutions' industrial-strength DHTML Menu works with 
Navigator, Internet Explorer, and other Web browsers, and is available 
in professional and corporate versions. Find out more at www . mi Ionic, 
com. 

is* Apycom Software offers DHTML Menu, as well as a ton of online exam- 
ples demonstrating how to use their product to create customized 
menus. You can download a free trial version of DHTML Menu from 

http://dhtml- menu. com. 

V SmartMenus DHTML menu is a shareware product you can download 
and use for a minimal fee. Check out SmartMenus on the Web at www . 

sma rtmenus . org for details. 
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Drop[ »g Expandable Site Maps 

In This Chapter 

Using DHTML to create expandable site maps 
Positioning a site map inside a frameset 
Tying a site map to content by using targeted hyperlinks 
Taking advantage of third-party site map scripts 



f 

■ n Chapter 9, 1 demonstrate creating a simple pull-down menu by using 
«C Dynamic HTML, or DHTML. (DHTML, as you see in Chapter 9, combines 
HTML, JavaScript, the document object model, and cascading style sheets 
into a powerful approach to creating interactive Web pages.) 

Although the examples in this chapter include HTML and cascading style 
sheet code, I don't spend a lot of time describing these two languages. If 
you're interested in finding out more about DHTML, including HTML and cas- 
cading style sheets, you might want to check out a good book devoted to 
these subjects. One worth checking out is Dynamic HTML: The Definitive 
Reference, 2nd Edition, by Danny Goodman (O'Reilly). 

In this chapter, I show you one way to transform the simple pull-down menu 
that you see in Chapter 9 into a useful site navigation tool called an expandable 
site map. Expandable site maps — similar to those used in popular software 
applications such as Microsoft Windows (see Figure 10-1) — can help the folks 
who visit you on the Web find information on your site quickly and easily. 



Site Map Basics 

A site map, such as the one you see in Figure 10-1, is a menu that organizes 
the contents of your Web site in a nice, neat, user-friendly order. 




Part III: Making Your Site Easy for Visitors to Navigate and Use 



_t C: Documents ,in<f Settings Owner My Documents My Pictuies Microsoft Cli|> Organizer 
File Edit View Favorites Tools Hel|> 



d Bodes 



Figure 10-1: 
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37 KB JPEG File 
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Because the purpose of a site map is to help visitors find content quickly, site 
maps are best designed as no-frills lists of organized links. If you think of site 
content as a book, the site map is the table of contents. 

Typically, you add a site map link, such as the one shown in the top-right 
corner of Figure 10-1, to each and every Web page in your site. When users 
click the site map link, a page containing a drop-down list (similar to the one 
in Figure 10-1) appears. 




Only large, complex Web sites need site maps. If your Web site contains fewer 
than 25 pages, you probably don't need to add a site map — although you 
certainly can if you'd like! 

A site map — no matter how cleverly designed — can't make up for poorly 
organized content. Think of a site map as an additional navigational tool, not 
a substitute for an orderly, well-planned-out site. 



Many approaches to creating site maps exist. In the following sections, I 
demonstrate one popular approach: combining pull-down menus with frames 
to create a site map that stays visible on one side of the page while displaying 
content on the other side of the page. 
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r 9, you see an example of a simple pull-down menu for a fictitious 
ite created by using a combination of HTML, JavaScript, and cascad- 
ing style sheets. In this chapter, I show you how to adapt that pull-down 
menu — by using frames, which I discuss in Chapter 7 — to create the site 
map shown in Figure 10-2. 

Creating the site map shown in Figure 10-2 involves three steps, which I explain 
further in this section and in the following two sections: 

1 . Creating a pull-down menu 

2. Adding a frameset 

3. Adding targeted hyperlinks 

You use a combination of HTML, JavaScript, and cascading style sheets to 
create a site map. The code that you see in Listing 10-1 is responsible for the 
site map shown in Figure 10-2. 



Figure 10-2: 
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The code shown in Listing 10-1 is on the companion CD under the filename 

si temap . htm. 
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istingT0-1: A Simple Pull-Down Menu 



<HTML> 
<HEAD> 

<TITLE>Using DHTML to Create a Site Map (From JavaScript For Dummies, 4th 

Edi ti on )</TITLE> 
<SCRIPT LANGUAGE-" JavaScri pt" TYPE="text/javascri pt"> 
<!-- Hide from older browsers 


function displayMenu(currentMenu) { 




var thisMenu = document. getElementByld(currentMenu) .style 


// If the menu is expanded, contract it. 
if (thisMenu. display == "block") { 
thisMenu. display = "none" 

} 

el se { 

// If the menu is contracted, expand 11 
thisMenu. display = "block" 




} 

return false 




} 

// End hiding--) 
</SCRIPT> 




<STYLE TYPE="text/css"> 
<!-- 




.menu {display:none; margin-left:20px;} 




--> 

</STYLE> 




</HEAD> 




<B0DY BGC0L0R="#FFFFFF"> 




<H3> 

<a href="dummyl . html " onCl ick="return displayMenut 'basicMenu' )">Knitting 

Basics</a> 

</H3> 

<span class="menu" id="basicMenu"> 

<b><a href="dummy3.htm" onClick="return displayMenut 'subMenu' )">P1 anning a 

project</a></b><br /> 
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<span class="menu" id="subMenu"> 

<|>Choosing yarn</a><br /> 
<L*wmhing</aXbr /> 

<b><a>The knit stitch</a></b><br /> 
<b><a>The purl stitch</aX/bXbr /> 
</span> 

<H3> 

<a href="du[rany2.html " onClick="return displayMenut 'advMenu' )">Advanced Topi cs</a> 
</H3> 

<span cl ass="menu" id="advMenu"> 

<a>Circular needl es</a><br /> 
<a>Cables</a><br /> 
<a>Felting</a><br /> 
<a>Fi ni shi ng</a><br /> 
</span> 
</B0DY> 
</HTML> 

To understand how the code in Listing 10-1 works, take a better look at the 
following code elements (each of which appears bold in the code): 

1. The JavaScript di spl ayMenuC ) function. The di spl ayMenu( ) function 
accepts a single parameter representing the current menu. First, the 
JavaScript code inside the di spl ay Menu ( ) function gets the document 
object associated with the current menu and stores it in the variable 
called thi sMenu. Then the code uses the thi sMenu object's di spl ay 
property to determine whether the current menu is expanded or con- 
tracted. If the current menu is expanded, the code contracts it; if the 
current menu is contracted, the code expands it. 

2. The cascading style sheet definition of the menu class. The HTML 

<STYLE> tags define a class of style sheet called menu. Every HTML com- 
ponent associated with the menu class (see Step 4) shares the display 
characteristics defined between the <STYLE> tags. 

3. The JavaScript calls to di spl ayMenu ( ) associated with each of the 
onCl i ck event handlers: one for the Knitting Basics hyperlink and 
one for the Advanced Topics hyperlink. When users click either the 
Knitting Basics or Advanced Topics hyperlink shown in Figure 10-2, the 
JavaScript code associated with the onCl i ck event handler for each of 
these hyperlinks sends the current menu to the displayMenu( ) func- 
tion, causing the current menu to contract (if it's already expanded) or 
expand (if it's contracted). 
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4. The HTML definition of the basicMenu and res Menu layers. Each of 
these layers, which are defined using the HTML <span> tag, associates 
ayer itself with the CSS menu class defined in Step 2. The result: The 
ser displays both the basi cMenu, subMenu, and advMenu layers 
usTng the same menu class definition — and the basi cMenu, subMenu, 
and advMenu layers are stored as document objects whose di spl ay 
property is accessible (and manipulable) through JavaScript. (Check 
out Step 1 for more information on the di spl ay property.) 



Adding frames to the puil-dovOn menu 

As you might notice, the site map shown previously in Figure 10-2 consists of 
two frames. One frame (the one on the left) contains the expandable pull-down 
menu. The other (the frame on the right) contains the site content. When a 
user clicks a pull-down menu selection in the left frame, the appropriate con- 
tent displays in the frame on the right. 

In the preceding section, I show you how to create a pull-down menu. In this 
section, I show you how to create a frameset — and add the pull-down menu 
to the left frame. (Note: For additional scoop on how frames work, check out 
Chapter 7.) 

First, take a look at the code in Listing 10-2. 




Experimenting with frames helps you understand how they work. Check out 
the frame code in Listing 10-2 by loading the file 1 i stl002 . htm, located on 
the companion CD, into your Web browser. 



Listing 10-2: Creating a Frameset Containing Two Frames 



<HTML> 




<headxt: 


:TLE>Site navigation example (from JavaScript For Dummies, 4th 




Edi ti on)</TITLEX/HEAD> 




<FRAMESET C0LS=" 170 , *" B0RDER= " 0 " F RAM ES P AC I N G= " 1 5 " 




FRAMEBORDER=" YES" FRAMEBORDER= " 0 " > 




< FRAME SRC="sitemap.htm" NAME="si temap" SCR0LLI NG="AUT0" 




N0RESIZE MARGINHEIGHT="15" MARG I NW I DTH= " 5 " LEFTMARGI N= " 0 " 




TOPMARGIN="0" TARGET="body"> 




< FRAME SRC="content.htm" NAME="content" SCROLLI NG="AUT0" NORESIZE 




MARG INHEIGHT="0" MARG I NW I DTH= " 0 " LEFTMARGI N= " 0 " TO PMARG I N= " 0 " 




TARGET="body"> 




</FRAMESET> 


</HTML> 
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As you read through the code in Listing 10-2, pay special attention to the 
HTML tags <FRAMESET>, </FRAMESET>, and <FRAME>. (I've bolded these tags 
n find them easily.) 



RAMESET> and </FRAMESET> tags create a holder for two frames, 
named si temap and content, respectively, which are created by the two 
<FRAME> tags. The source for the left frame is si temap . htm, and the source 
for the right frame is content . htm. If you take a look at the si temap . htm file 
(located on the companion CD), you find it contains the code in Listing 10-1. If 
you take a look at the content, htm file (also located on the companion CD) 
you find it contains the heading shown previously in Figure 10-2, Wei come to 
my knitting site! 

The upshot? When you load the file 1 i st 1002 . htm into a Web browser, the 
<FRAMESET>, </FRAMESET>, and <FRAME> tags display the pull-down menu 
(stored as si temap . htm) in the left frame and the initial content (stored as 
content . htm) in the right frame. Check out the following section for details. 



Putting it alt together: Adding 
targeted hyperlinks 

A site map isn't much good without hyperlinks; after all, the whole point of a 
site map is to direct users to different Web pages in your site. 

You add a hyperlink by using the HTML <A> tag, like so: 

<A HREF="someFi 1 e . htm"> 

When you use frames, however, you need to define the TARGET attribute as 
well as the HREF attribute. When you define the TARGET attribute, you specify 
the value of the frame in which you want the hyperlinked content to appear, 
like this: 

<A HREF="someFi 1 e . htm" TARGET="someFrameName"> 

If you've had a chance to glance through Listing 10-2, you notice that the 
name of the frame on the right is content. So to add a targeted hyperlink to 
the code in Listing 10-1, you define TARGET=" content . htm", as shown here: 

<a href="yarn.htm" TARGET="content">Choosing yarn</a><br /> 
<a href="swatching.htm" TARGET="content">Swatching</aXbr /> 



<a href="knit.htm" TARGET="content">The knit stitch</a><br /> 
<a href="purl .htm" TARGET="content">The purl stitch</a><br /> 

<a href="circular.htm" TARGET="content">Ci rcul ar needles</a><br /> 
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<a href="cables.htm" TARGET="content">Cabl es</a><br /> 
<$ href="felting.htm" TARGET="content">Felting</a><br /> 

finishing.htm" TARGET="content">Finishing</aXbr /> 



As you see from this code, clicking the Choosing Yarn link causes the HTML 
file yarn . htm to appear in the content frame (the right frame, which Listing 
10-2 describes.) Clicking the Swatching link causes the HTML file swatchi ng . 
htm to appear in the content frame; and so on. 



Listing 10-3 shows you the updated site map code containing all eight targeted 
hyperlinks. Together with the code in Listing 10-2, the code in Listing 10-3 and 
the referenced content files (yarn . htm, swatchi ng . htm, kni t . htm, purl . htm, 
ci rcul ar . htm, cabl es . htm, fel i ng . htm, and finishing, htm) represent a 
complete, frame-enhanced site map. 




You can test the site map code for yourself by loading the file listl002.htm 
that you find on the companion CD. 



Listing 1 0-3: Putting It All Together: The Site Map Code Updated to 
Reflect Targeted Hyperlinks 

<HTML> 
<HEAD> 

<TITLE>Usi ng DHTML to Create a Site Map (From JavaScript For Dummies, 4th 

Edi ti on )</TITLE> 
<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascript"> 
<!-- Hide from older browsers 



function displayMenu(currentMenu) { 



var thisMenu = document. getElementByld(currentMenu) .style 

// If the menu is expanded, contract it. 
if (thisMenu. display == "block") { 
thisMenu. display = "none" 

) 

el se I 

// If the menu is contracted, expand it. 
thisMenu. display = "block" 

1 

return false 



// End hiding--) 
</SCRIPT> 



<STYLE TYPE="text/css"> 
<!-- 



.menu (display:none; margi n- 1 eft : 20px; } 
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--> 




<B0DY BGC0L0R= "#FFFFFF " > 
<H3> 

<a href ="dummy 1 . html " oncl i ck=" return di spl ayMenut ' basi cMenu ' ) ">Kni tti ng 
Basi cs</a> 

</H3> 

<span class="menu" id="basicMenu"> 

<b><a href ="durnmy3 .htm" oncl i ck=" return di spl ayMenut ' subMenu ' ) " 
TARGET= " content " >P1 anni ng a project</aX/bXbr /> 

<span class="menu" id="subMenu"> 

<a href="yarn.htm" TARGET="content">Choosi ng yarn</a><br /> 
<a href="swatching.htm" TARGET="content">Swatchi ng</aXbr /> 
</span> 

<b><a href=" kni t . htm" TARGET="content">The knit sti tch</aX/bXbr /> 
<b><a href="purl .htm" TARGET="content">The purl sti tch</aX/bXbr /> 
</span> 

<H3> 

<a href="dummy2.html " oncl ick="return displayMenu( 'advMenu' )">Advanced 

Topics</a> 

</H3> 

<span class="menu" id="advMenu"> 

<a href="ci rcul ar . htm" TARGET= " content " >Ci rcul ar needl es</a><br /> 
<a href="cables.htm" TARGET="content">Cabl es</a><br /> 
<a href="fel ti ng.htm" TARGET=" content " >Fel ti ng</a><br /> 
<a href="finishing.htm" TARGET="content">Fi ni shi ng</a><br /> 

</span> 
</BODY> 
</HTML> 

Taking Advantage of Third-Party 
Site-Mapping Toots 

No doubt about it: Creating DHTML site maps from scratch takes quite a bit 
of programming know-how — not just with respect to JavaScript but to HTML 
and cascading style sheets, as well. If you don't want to invest the time and 
trouble in figuring out everything you need to know to code DHTML site 
maps by hand, you might find a third-party site-mapping tool is just what the 
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doctor ordered. Third-party site-mapping tools — some of which you can find 
for low or even no cost on the Web — allow you to create customized site 

h a minimum of effort. (The downside, of course, is that these scripts 
look or behave quite the same as one you create yourself.) 



The following list — which represents just a fraction of the tools available - 
is a good place to begin looking for the perfect third-party site-map script: 



i>* Download Likno Software's menu-creation product AllWebMenus (for 
free) and get instant access to an easy-to-use site-map generator. For 
details, check out Likno Software on the Web at www .likno. com. 

v 0 Good for large Web sites, Xtreeme's SiteXpert 7 allows you to automate 
site-map creation and updates. (If you frequently add or delete pages 
from your site, you might find automatic updating to be indispensable.) 
Find out more at www . xtreeme . com/si texpert. 

CDR's Site Map Pro 2.1 uses a wizard (an easy-to-use, walk-you-through-it 
interface) to make creating cross-browser site maps as simple as possi- 
ble. You can get the latest version from www . si temappro .com. 
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In This Chapter 

Exploring plain HTML tooltips 

Breaking DHTML tooltips down into bite-sized chunks 
Getting acquainted with active areas and mouse events 
Using third-party tooltips scripts 



f 

mi you use Internet Explorer or Netscape Navigator to surf the Web, you 
«C might be familiar with the helpful messages that pop up when you move 
your mouse over important areas of some Web pages. These helpful messages, 
called tooltips, are designed to give users extra information — anything from 
the definition of the word that the mouse pointer is over to a fancy scholarly 
citation. Because tooltips can make navigating a Web site easier and more 
enjoyable, they're worth adding to your own Web pages. 

You can add basic tooltips to a Web page by using plain old HTML tags. 
The problem is that Internet Explorer supports one tag attribute (A LT) and 
Netscape Navigator supports another (TITLE). (Beginning with version 6.x, 
Internet Explorer 6.x now supports TITLE, too, but some users may have 
earlier versions of Internet Explorer installed.) And if you want to customize 
your tooltips — add an image, for example, or display large-size text over an 
eye-catching yellow background — you're out of luck. The HTML ALT and 
TITLE tag attributes don't allow for such customization. 

Does that mean you have to give up your hopes of customized tooltips? No! As 
I demonstrate in this chapter, you can add customized tooltips that appear the 
same in both Internet Explorer and Navigator (as well as other browsers) by 
using dynamic HTML. 

Dynamic HTML, or DHTML, refers to the combination of HTML, JavaScript, 
and cascading style sheets — a collection of client-side languages and stan- 
dards you use to create Web pages that change appearance dynamically, after 
they're loaded into a user's Web browser. 
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\\V ^ Although the examples in this chapter include HTML and cascading style 

sheet code, I don't spend a lot of time describing these two languages. (This 
script book, after all!) If you're interested in finding out more about 
including HTML and cascading style sheets, you might want to check 
out a good book devoted to these subjects. One worth checking out is 
Dynamic HTML: The Definitive Reference, 2nd Edition, by Danny Goodman 
(O'Reilly). 
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Creating Plain HTML Tooltips 

In the example in Figures 11-1 and 11-2, you see a DHTML tooltip and a plain 
HTML tooltip. 

As you can see in Figure 11-1, the DHTML tooltip — the one that says "Left 
cousin" — appears in large print. The HTML tooltip ("Sarah"), in contrast, is 
small. Moving the mouse pointer to another part of the image causes the 
tooltips to disappear. Other tooltips appear as appropriate; for example, 
moving the mouse pointer over the girl on the right displays the "Right 
cousin" DHTML tooltip. 



Figure 11-1: 

You can 
customize 

DHTML 

tooltips, 
which is a 

distinct 
advantage 
over plain 
HTML 

tooltips. 



0j Tooltip Example fiom JavaScr ipt For Dummies. 4th 
File Edit View Favorites Tools Help 



n - Microsoft Internet Explorer 
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Addies-; ;Q C:\em\write\jsfd4e\scripts\listll01.htm 




J hle:(//C:/em/write/jsfd4e/scripts/listll01.htm* 



j My Computer 



</BODY> 
</HTML> 
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File: Iist1101.htm, 2554 bytes, 84 lines, PC, ANSI 
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Figure 11-2: 

Moving the 
mouse 
pointer over 
another part 
of the photo 
displays 
different 
tooltips. 



f&l Tooltip Example from JavaScript Foi Dummies. 4th Edition - Microsoft Internet Explorer 
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J My Computer 



</mp> 
The code above defines a map 
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To create the plain HTML tooltip shown in Figure 11-1, you specify a value for 
the ALT attribute associated with the <AREA> tag as shown below : 

<MAP name="PicMap" id="PicMap"> 

<AREA SHAPE="rect" C00RDS=" 112 , 91 , 136 , 315" HREF="#" ALT="SararT> 
<AREA SHAPE="rect" C00RDS=" 180 ,81 , 200 , 320" HREF="#" ALT="Mary" /> 

</MAP> 

<IMG SRC="cousins.jpg" USEMAP="#PicMap" H E I GHT= " 289 " WIDTH="289" /> 

This code displays a 289 x 289 pixel image overlaid by a map (named Pi cMap) 
that defines two rectangular areas. When a user mouses over one area (whose 
coordinates happen to be 112,91,136,315), the HTML tooltip Sarah appears. 
When a user mouses over another area of the picture (defined by the coordi- 
nates 180,81,200,320) the tooltip Ma ry appears. 

To create a tooltip that appears in Netscape Navigator, you use the TITLE 
attribute in place of the ALT attribute: for example, TITLE="Mary ". 

As you see in the following section, the code required to create a DHTML 
tooltip is a bit more involved. 
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tooltips by using DHTML involves four separate steps. I describe 
these four steps here, and in the following sections I provide you with the 
example code responsible for Figures 11-1 and 11-2. 

1. Create an HTML map containing one or more designated areas. 

This step is identical to the step you use to create plain HTML tooltips. 

2. Define a style for the tooltip using the HTML <STYLE> and </STYLE> 
tags. 

Defining a style for the tooltip automatically creates a JavaScript-accessible 
object for that tooltip. 

3. Create custom JavaScript functions to access and change the tooltip 
object. 

The purposes of the JavaScript functions are to display the tooltip if it's 
not already visible and hide it if it is visible. 

4. Include two calls to the custom JavaScript functions (see Step 2): one 
call associated with the onMouseOver event handler (to display the 
tooltip), and one call associated with the onMouseOut event handler 
(to hide the tooltip). 

These calls cause the tooltip to appear when the mouse pointer enters 
the designated area and disappear when the mouse pointer leaves the 
designated area. 



Creating an HTML map and 
designating active areas 

The first thing you need to do when you create DHTML tooltips is define which 
areas of your Web page you want to be active — that is, which areas of your 
Web page you want to display tooltips in response to a user's mouse pointer. 
After you decide which areas of your page you want to be active, you use 
HTML to create a map and one or more active areas, as shown in Listing 1 1-1. 



Listing 11-1: Defining an HTML Map and Designating Active Areas 



// From <MAP> to </MAP> defines an HTML and active areas. 

<MAP NAME="PicMap" ID="PicMap"> 

<AREA SHAPE="rect" C00RDS=" 112 , 91 , 136 , 315" HREF="#" ALT="Sarah" /> 
<AREA SHAPE="rect" C00RDS=" 180 ,81 , 200 , 320" HREF="#" ALT="Mary" /> 
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<AREA SHAPE="rect" COO RDS= " 5 9 , 2 6 , 2 08 , 64 " HREF="#" A LT= " bou g a i n v i Ilea" /> 
<AREA SHAPE="rect" C00RDS="226 , 25 , 303 ,82" HREF="#" ALT="needs paint" /> 



// Overlaying a map on top of an image 

<IMG SRC="cousins.jpg" USEMAP="#Pi cMap" HEIGHT="289" WIDTH="289" B0RDER="0" 
ALT="Two cousins" /> 

You can use a graphics program such as Paint, which comes installed with 
Windows, to get the upper-left and lower-right x,y coordinates for each 
active area. 

The code in Listing 11-1 defines a map named Pi cMap and four separate rec- 
tangular areas. Then, near the bottom of Listing 11-1, you see the HTML 
< I MG> tag, which places an image on the page and overlays that image with 
the Pi cMap map. 

After you define your active areas, you're ready to define a style for the 
tooltip, which I demonstrate in the following section. 



You define a style for a Web page object by using the HTML <STY LE> and 
</STYLE> tags. Defining a style for your tooltips accomplishes two important 
tasks: 

It allows you to specify how you want your tooltips to appear: bolded, 
large font, and so on. 

W It allows you to create a named, JavaScript-accessible tooltip object that 
you can make visible and invisible. 

In Listing 11-2, you see an example of the <STYLE> and </STYLE> tags in 
action. 

Because cascading style sheets are so powerful and flexible, they're also rela- 
tively complex. You might want to check out a book, such as Designing CSS 
Web Pages, by Christopher Schmitt (New Riders). Alternatively, you could 
pick up a good HTML book — many devote a chapter or two to the <STY LE> 
and </STY LE> tags and cascading style sheet syntax. 




Defining a style for the tooltip 
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Listing 1 1 -2: Using the <STYLE> and </STYLE> Tags to Define 
a Tooltip Style 

pe="text/css"> 



. tool ti pStyl e (background-color: pink; border: pink Ipx solid; layer- 
background-color: pink; width: lOOpx; font: 20px arial, helvetica, 
sans-serif; padding: 5px; position: absolute; visibility: hidden) 

--> 

</STYLE> 

The code you see in Listing 11-2 defines a tooltip style called, appropriately 
enough, tool ti pSty 1 e. The code specifies that tooltip text should appear as 
a relatively large 20 pixels on a nice bright-pink background. 

Creating custom JavaScript functions 
to display and hide tooltips 

You use JavaScript to access the correct tooltip and then to display that 
tooltip (as a user's mouse pointer moves into the active area) or hide it 
(if a user's mouse pointer moves away from the active area). 

In Listing 11-3, you see two JavaScript functions defined: di spl ayTi p ( ) 
and h i deTi p ( ) . Take a peek at the code, and then see the human-readable 
description that follows. 

Listing 11-3: The displayTipQ and hideTipO Functions 



function displayTip(theEvent.currentElement) { 

if (latestBrowser) I 

tooltip = document. getElementByld(currentElement) .style 
) 

else { 

tooltip = eval ( "document . " + currentElement) 

I 

if (document. all ) ( 

tooltip. pixelTop = parseInt(theEvent.y)+2 
tooltip. pixel Left = Math.max(2,parseInt(theEvent.x)- 
75) 

I 
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else { 
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if (latestBrowser) { 

tooltip. top = parseInt(theEvent.pageY)+2 + "px" 
1 tooltip. left = Math.max(2,parseInt(theEvent.pageX)-75) + "px" 



el se { 



tooltip. top = parseInt(theEvent.pageY)+2 

tooltip. left = Math.max(2,parseInt(theEvent.pageX)-75) 



tooltip. visibility = "visible" 



function hideTip(currentElement) { 

if (latestBrowser) ( 

tooltip = document. getElementByld(currentElement) .style 



else ( 



tooltip = eval ( "document. " + currentElement) 

1 

tooltip. visibility = "hidden" 

) 

The di spl ayTi p ( ) function accepts two parameters: theEvent (the value 
of which at runtime is either the mouseOver or mouseOut object) and 
currentEl ement (the value of which at runtime is the name of the tooltip 
to manipulate). 

The first if -else statement in di spl ayTi p( ) obtains the tooltip style 
object. The second i f -el se statement sets the x,y coordinates for the tooltip. 
Finally, the third i f -el se statement turns the visibility of the tooltip on. 

The hi deTi p( ) function is much shorter than the di spl ayTi p( ) function. 
The hi deTi p( ) function simply obtains the tooltip to manipulate and then 
hides it. 

The di spl ayTi p ( ) and hi deTi p ( ) functions don't execute unless they're 
attached to event handlers. Fortunately the following section demonstrates 
how to do just that. 



Catting custom functions in response to the 
onMouseOtfer and onMouseOut events 



For tooltips to be effective, they must appear when a user mouses over 
something on a page and disappear when the mouse pointer moves away. 
Fortunately, accomplishing this feat is easy with JavaScript, as the code in 
Listing 11-4 shows. 
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Listing 1 1 -4: Attaching the displayTipO and hideTipO Calls 
to Mouse Events 

e = " P i c M a p " id="PicMap"> 

<AREA SHAPE="rect" C00RDS=" 112 , 91 , 136 , 315" HREF="#" 
onMouseOut="hideTip( ' tool ti pi ' )" 

onMouseOver="displayTip(event, ' tool ti pi ' )" ALT="Sarah" /> 
<AREA SHAPE="rect" C00RDS= " 1 80 , 81 ,200,320" HREF="#" 
onMouseOut="hideTip( ' tool ti p2 ' )" 

onMouseOver="displayTip(event, ' tool ti p2 ' )" ALT="Mary" /> 
<AREA SHAPE="rect" C00RDS="59 , 26 , 208 , 64" HREF="#" 
onMouseOut="hideTip( ' tool ti p3 ' )" 

onMouseOver="displ ayTip( event, ' tool ti p3 ' )" ALT="bougai nvi 1 1 ea" /> 
<AREA SHAPE="rect" C00RDS="226 , 25 , 303 ,82" HREF="#" 
onMouseOut="hideTip( ' tool ti p4 ' )" 

onMouseOver="displayTip(event, ' tool ti p4 ' )" ALT="needs paint" /> 
</MAP> 

<SPAN CLASS="tool ti pStyl e" I D="tool ti pi "> Lef t cousi n</SPAN> 
<SPAN CLASS=" tool ti pSty 1 e" ID="tooltip2">Right cousi n</SPAN> 
<SPAN CLASS="tooltipStyle" ID="tooltip3">Tree</SPAN> 
<SPAN CLASS="tooltipStyle" ID="tooltip4">Shutters</SPAN> 

Much of the code in Listing 1 1-4 also appears in Listing 1 1-1 earlier in this 
chapter. The new parts of the code added here are the onMouseOut and 
onMouseOver definitions. (See the bold portions of the code.) 

As you can see from Listing 11-4, the JavaScript function di spl ayTi p ( ) is 
attached to the onMouseOver event handlers for the each of the active areas, 
and the JavaScript function hi deTi p ( ) is attached to the onMouseOut event 
handlers for those same active areas. (To check out the JavaScript code for 
the di spl ayTi p( ) and hi deTi p ( ) functions, flip to Listing 11-3. ) 




If you're interested in finding out more about events and event handlers, 
including onMouseOut and onMouseOver, flip to Chapter 13, which is devoted 
to these topics. 



What all this means is that at runtime, when a user mouses over one of the 
active areas (active areas are defined using the <AREA> tag) the JavaScript 
interpreter calls the di spl ayTi p( ) function, sending the following two 
parameters: 

1. The appropriate event, which ismouseOver 

2. The name of the tooltip to display: tool ti pi, tool ti p2, tool ti p3, 
or tool ti p4. (The tooltip names and content are defined by using the 
<SPAN> and </SPAN> tags, as shown in Listing 11-4.) 

Then, when a user mouses away from the active area, the JavaScript inter- 
preter calls the hi de ( ) function, sending the name of the tooltip to hide. 
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Putting it att together: Using DHTML 
'BOOkfe^ create simple tooltips 



Sometimes you find it useful to experiment with a working script containing 
all the necessary elements for DHTML tooltips: HTML code that defines the 
active areas for which you want to create tooltips, style sheet code that 
defines how you want your tooltips to appear, and JavaScript code that tells 
the Web browser to display (or hide) the appropriate tooltips depending on 
mouse pointer position. 



In Listing 1 1-5, a complete, working script is exactly what you find. Listing 1 1-5 
pulls together the code you see in Listings 11-1 through 11-4 to demonstrate 
how each piece fits together. 

You can find the code in Listing 1 1-5 on the companion CD under the filename 

listll05.htm. 



Listing 1 1 -5: The Whole Enchilada: A Working Tooltip Script 

<HTML> 
<HEAD> 

<TITLE>Tool ti p Example from JavaScript For Dummies, 4th Edition</TITLE> 
<SC RI PT type="text/javascri pt" language="Javascript"> 
<!-- Hide script from older browsers 



if (document. getElementByld) ( 
1 atestBrowser = true 

1 

el se ( 

1 atestBrowser = false 



function displayTip(theEvent,currentElement) { 
if ( 1 atestBrowser) { 

tooltip = document. getElementByld(currentElement). style 

) 

el se 1 

tooltip = eval ( "document . " + currentElement) 

1 

if (document. al 1 ) { 

tooltip. pixelTop = parseInt(theEvent.y)+2 

tooltip. pixel Left = Math.max(2,parseInt(theEvent.x)-75) 

} 

else { 

if (latestBrowser) ( 

tooltip. top = parse!nt(theEvent.pageY)+2 + "px" 



(continued) 
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Listing 1 1 -5 (continued) 
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tooltip. left = Math.max(2,parseInt(theEvent.pageX)-75) + 

"px" 

el se { 

tooltip. top = parseInt(theEvent.pageY)+2 
tooltip. left = Math.max(2,parseInt(theEvent.pageX)-75) 



tooltip. visibility = "visible" 

) 

function hideTip(currentElement) ( 
if (latestBrowser) ( 

tooltip = document. getElementByld(currentElement) .style 

I 

el se { 

tooltip = eval ( "document . " + currentElement) 

I 

tooltip. visibility = "hidden" 

I 

// End hiding script --> 
</SCRIPT> 



<STYLE type="text/css"> 
<!-- 



.tooltipStyle I background-col or : pink; border: pink Ipx solid; 
layer-background-color: pink; width: lOOpx; font: 20px arial, 
helvetica, sans-serif; padding: 5px; position: absolute; 
visibility: hidden) 

--> 

</STYLE> 

</HEAD> 



<B0DY> 



<MAP name="PicMap" id="PicMap"> 

<AREA SHAPE="rect" C00RDS=" 112 , 91 , 136 , 315" HREF="#" 
onMouseOut="hideTi p( ' tool ti pi ' ) " 

onMouseOver="displayTip(event, ' tool ti pi ' )" alt="Sarah" /> 

<AREA SHAPE="rect" C00RDS=" 180 ,81 , 200 , 320" HREF="#" 
onMouseOut="hideli p( ' tool ti p2 ' ) " 

onMouseOver="displayTip(event, ' tool ti p2 ' )" alt="Mary" /> 

<AREA SHAPE="rect" C00RDS="59 , 26 , 208 , 64" HREF="#" 
onMouse0ut="hideli p( ' tool ti p3 ' ) " 

onMouseOver="di spl ayTi p( event, ' tool tip3 ' ) " alt="bougainvillea" /> 
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<SPAN CLASS="tooltipStyle" ID="tool ti pl">Left cousi n</SPAN> 

<SPAN CLASS="tooltipStyle" ID="tool ti p2 " >Ri ght cousi n</SPAN> 

<SPAN CLASS="tooltipStyle" I D=" tool t i p3 " >Tree< /SPAN> 

<SPAN CLASS="tool ti pStyl e" ID="tool ti p4">Shutters</SPAN> 

<D I V al i gn="center"> 

<IMG SRC="cousins.jpg" USEMAP="#Pi cMap" HEIGHT="289" WIDTH="289" 
B0RDER= " 0 " alt="Two cousins" /> 

</DIV> 

</B0DY> 
</HTML> 

Taking Advantage of Third-Party 
Tooltips Scripts 

Creating DHTML tooltips from scratch, as you see from Listing 11-5, takes not 
just JavaScript expertise but expertise in HTML and CSS programming, too. If 
your heart is set on adding custom tooltips to your site but you don't want 
to invest the time and trouble in finding out everything you need to know to 
code them by hand, you're in luck: Third-party scripts are available, and they 
take most of the hard work out of creating custom tooltips. 

Lots of shareware tooltips scripts are available for download over the Web. If 
you're interested, you might want to start your search for the perfect tooltips 
tool by checking out the following two sites: 

f With Walter Zorn's DHTML Tooltips you can create cross-platform, cross- 
browser tooltips containing images as well as text. More information 
about this cool shareware tool is available at www . wal terzorn .com/ 
tooltip/toolti p_e .htm. 

Dan Allen's DOM Tooltip is a shareware tool you can use to create tooltips 
that work not just in Internet Explorer and Navigator but also in other 
browsers, such as Opera. You can find download instructions and tons of 
examples at www .mojavel i nux . com/ cooker/ demos /domTT/i ndex . html . 



<AREA SHAPE="rect" C00RDS="226 , 25 , 303 ,82" HREF="#" 
onMouseOut="hideTip( ' tool t i p4 ' )" 

onMouseOver="displayTip(event, ' tool ti p4 ' )" alt="needs paint" /> 
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In this part . . . 

#«/art IV is jam-packed with information for making pro- 
V fessional-looking Web pages that are so cool you just 
might shock yourself! Chapter 12 shows you how to gather 
and verify input from the folks who visit your Web site — 
including time-tested tips to help you design user-friendly 
Web pages and communicate effectively with your users. 
In Chapter 13, you see how to turn a simple Web page 
into a Web-based application by hooking your script to a 
user-initiated event, such as key press or a mouse click. 
And finally, Chapter 14 introduces you to JavaScript error- 
handling techniques that you can use to replace generic 
error messages (which can frustrate your visitors) with 
specific, appropriate, user-friendly error messages. 



Chapter 12 

Handling Forms 



In This Chapter 

Getting information from your users 

Verifying user input 

Giving your users helpful feedback 



f 

■ f you're familiar with HTML fill-in forms, you know how useful they can be. 
stS Adding an HTML form to your Web page lets your visitors communicate 
with you quickly and easily Users can enter comments, contact information, 
or anything else into an HTML form. Then that information is transmitted 
automatically to you (okay, technically, to your Web server) the instant your 
users submit the form. 

Although HTML forms are great all by themselves, JavaScript makes them even 
better! By using JavaScript, you can create intelligent forms — forms that 
instantly correct user input errors, calculate numeric values, and provide 
feedback. In developer-talk, what JavaScript gives you is a way to perform 
client-side data validation (sometimes referred to as data scrubbing), which is 
an essential component of any well-designed piece of software, from simple 
Web page to full-blown online application. 

Capturing User Input by Using 
HTML Farm Fields 

JavaScript adds two very useful features to plain old HTML forms: 

V JavaScript lets you examine and validate user input instantly, right on 
the client. 

V JavaScript lets you give users instant feedback. 
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I explain both of these features in the following two sections. 



an input-Validation script 



Back in the old days, Web developers had to write server-side Common 
Gateway Interface (CGI) programs to process user input. That approach, 
which is still in use, is effective — but inefficient. 

For example, imagine that you want to allow your visitors to sign up for your 
monthly e-newsletter, so you create an HTML form containing a single input 
field called E-mail Address. Then imagine that a visitor accidentally types XYZ 
into that field (instead of a valid e-mail address such as j anedoe@aol .com). 
The contents of the E-mail Address field have to travel all the way from that 
user's Web browser to your Web server before your CGI program can examine 
the information and determine that XYZ is invalid. 

By using JavaScript, on the other hand, you can instantly determine whether an 
input value is valid, right inside the user's browser — saving the user valuable 
time. (And saving yourself the trouble of having to figure out how to create a 
CGI program in C, C++, or Perl!) 



Different strokes for different folks: 
Data validation using regular expressions 



Writing scripts is like anything else in life: Usually, 
more than one way exists to approach any given 
problem. Some JavaScript programmers like to 
spell things out much the way I demonstrate in 
the code that you see in this chapter — in other 
words, to use as many lines of script as neces- 
sary to create a human-readable, working script. 
Other JavaScript programmers sacrifice human 
readability for brevity, reasoning that fewer lines 
of code means fewer lines to debug. 



For those of you in the latter camp, regular 
expressions can come in mighty handy. A regu- 
lar expression is a special kind of pattern that 
you can use to specifytext strings. For example, 
here's a regular expression that describes a 
somebody@somepl ace . some_suf f i x 
e-mail address: 

/ A \w+@\w+(\.\w(3))$/ 

Scary stuff! But when you break it down into little 
pieces, you understand how it works, as you 
can see in Table 12-1. 
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Input validation generally falls somewhere in one of the following three 
categories: 
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tence: Tests whether a value exists. 

i>* Numeric: Ensures that the information is numbers only. 

u* Pattern: Tests for a specific convention, such as the punctuation in a 
phone number, an e-mail address, a Social Security number, or a date. 

In Listing 12-1, you see the JavaScript code required to validate the oh-so- 
common pattern category: an e-mail address. (The order form script section 
in this chapter demonstrates examples of existence and numeric validation, 
as well as pattern validation.) 



Figure 12-1 shows you this code in action. You can experiment with these 
techniques by loading the 1 i st 1201 . htm file from the companion CD into 
your Web browser. 



Figure 12-1: 

Hey, that's 
not an 
e-mail 
address! 



Data scrubbing feedback example Ifrorn JavaSciii ■ Jitioiu Microsoft Internet Explo 

File Edit View Favorites Tools Hell, 



• 



Q Ba * * 0 l*l iiD ft jP*«<» ^-Fevontes t^Media ^ ' * [3 " □ H| H 



Address [gfile:///C:/em/wnte/isfd4e/si:ripts/listl201.htm?emailAddress=xy! 



IB' 



Data scrubbing/feedback example 

1. Type an invalid e-mail address (such as XYZ) into the input field below. When you're finished, click here 

2. Then, type a valid e-mail address (such as emily@emiiyv.com) into the field, and click here. 
E-mail address: 



Microsoft Internet Explorer 



Sorry, you entered an invalid e-mail address. Please try again. 



^] Done 



■^fr-^m^ ^TextPad-[... j 6j] 506331 Chi... 



i My Computer 



3 Data scrubb... 



i ownerS>C_.., j^lflg 
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Listing 12-1: A Script That Validates the E-Mail Address Pattern 

<|CRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 



71 />/Vf ////////////////////////////////////////////// 
// This function tests for the punctuation characters 
// (. and @) found in a valid e-mail address. 
////////////////////////////////////////////////////// 

function i sAVal idEmail ( i nputVal ue) { 

var foundAt = false 
var foundDot = false 
var atPosition = -1 
var dotPosition = -1 

// Step through each character of the e-mail 
// address and set a flag when (and if) an 
// @ sign and a dot are detected. 

for (var i=0; i<=inputValue. length; i++) I 
if (inputValue.charAt(i ) == "@" ) ( 
foundAt = true 
atPosition = i 



// If both an @ symbol and a dot were found, and 
// in the correct order (@ must come first)... 

if ((foundAt && foundDot) && (atPosition < dotPosition)) ( 

// It's a valid e-mail address. 

al ert( "Thanks for entering a valid e-mail address!") 
return true 



// The e-mail address is invalid. 

al ert( "Sorry , you entered an invalid e-mail address. Please try again.") 
return false 




else if ( i nputVal ue. charAt( i ) == ".") { 
foundDot = true 
dotPosition = i 



else I 
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In Listing 12-1, you see that the i sAVal i dEmai 1 ( ) function accepts a single 
parameter, called inputValue. (I show you an example of calling this function 
12-2.) 




Inside i sAVal i dEmai 1 ( ), the for loop steps through each character of the 
input e-mail address, one character at a time, looking for an at symbol (@) and 
a dot (.). If the interpreter finds both of these characters in the input e-mail 
address — and if the @ symbol appears before the . — that e-mail address 
passes the test as valid. 

If you want to perform additional checks — for example, a check to ensure that 
at least one character precedes both the @ and the . or one to ensure that the 
last three characters are com, org, edu, or net — you can add the additional 
JavaScript statements to i sAVal i dEmai 1 ( ) to do so. As a developer, the cri- 
teria that define a valid pattern are solely up to you. Whether the additional 
JavaScript statements necessary to catch all conceivable errors are worth 
the trouble and complexity is your decision, as well. In this example, I figure 
that the most likely mistake users make is forgetting to type an @ or a period, 
so the code in Listing 12-1 fits the bill nicely. 



Table 12-1 Examining a Few Regular Expression Symbols 



Regular Expression Symbol I 


Weaning 






1 


Beginning of the pattern 




A 


Beginning of a string 




\w+ 


One or more letters, numbers, or unde 


rscores 



@ The ©symbol 



\w+ One or more letters, numbers, or underscores 

( \ . \w{3} ) A dot followed by three letters, numbers, or 

underscores 

$ Ending of a string 

/ Ending of the pattern 



Listing 12-2 puts it all together to show how you can use a regular expression 
to validate an e-mail address in JavaScript. (Note how many fewer lines this 
e-mail validation script uses than the one I offer in Listing 12-1 earlier in this 
chapter.) 
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Listing 1 2-2: Using a Regular Expression to Validate an E-Mail Address 

val idateEmai 1 ( i nput ) ( 

avaScript recognizes regular expressions and automatically 
esignates the variable "emai 1 Pattern" as a RegExp object, 
var emai 1 Pattern = / A \w+@\w+(\.\w|3) )$/ 




// testO is a built-in method of the RegExp object, 
if (emailPattern.test(input)) ( 

alertC'This is a valid e-mail address.") 

1 

el se { 

alertC'Error: this is NOT a valid e-mail address") 

1 

1 

<B0DY> 
<F0RM> 

Please enter an e-mail address and click somewhere else on the page: 
<INPUT TYPE="text" SIZE="25" onBl ur=" val i dateEmai 1 ( thi s . val ue) ; "> 



Regular expressions are fairly complex animals, and I can't go into all the 
nitty-gritty details of them here. Fortunately, Microsoft maintains a great 
primer on regular expressions (and the built-in JScript object RegExp) at 



http://msdn.microsoft.eom/l i bra ry /default. asp?url=/l i bra ry /en - 

us/jscript7/html /jsreconlntroducti onToRegul a r Express ions .asp 





Oh, no! Everything's blurry! 



The nameforthe onBl ur event handler relates 
to the concept of focus. An object is said to 
receive focus when you click it. So, by default, the 
object becomes blurrywhen you click some- 
thing else, and that object /osesfocus. 

Here's a quick rundown of when the JavaScript 
interpreter executes a few common blur-related 
event handlers: 

f" onFocus executes when an element 
receives focus (a usertabsto it or clicks it). 

V onBl ur executes when a user clicks an 
element (the element gets focus) and then 



clicks somewhere else without changing 
anything (the element loses focus, or blurs). 

is* onChange executes when an element 
loses focus and its contents are modified. 

V onSel ect executes when a user selects 
some or all text (inside a text or text a re a 
element). The behavior of onSelect is 
similar to onFocus except that onSel ect 
occurs when the element receives focus 
andthe user selects text. 
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You can find the regular expression code from Listing 12-2 on the companion 
CD. Just look for the file regexp . htm. 

oks 

Catting a Validation script 

To someone surfing the Web, few things are more annoying than typing a 
bunch of information into a form, clicking the form's Submit button, and then 
— after a lengthy wait — seeing a generic error message that says something 
likeYou filled something out incorrectly. 

JavaScript lets you check each individual input field, if you like, and pop up 
instant feedback to let your users know (before they tab clear down to the 
end of a long form) that they need to make a correction. 

In the JavaScript code shown in Listing 12-3, the i sAVa 1 i dEma i 1 ( ) function 
(which I define in Listing 12-1) is called from the HTML text element's onBl ur 
event handler. The result? Entering an e-mail address into the text element 
and clicking elsewhere on the Web page causes the i sAVal i dEmai 1 ( ) func- 
tion to execute (refer to Figure 12-1). 



Listing 1 2-3: Calling the isAValidEmail() I 
Handler 


Function from an onBlur Event 


<B0DY> 

<Hl>Data scrubbing/feedback example</Hl> 

<0L> 

< L I >Ty pe an invalid e-mail address (such as <I 
below. When you're finished, cl 


>XYZ</I>) into the inp 
i ck <B>here</B>. 


iut field 



<p> 

< L I >f hen , type a valid e-mail address (such as <I>emi ly@emi lyv.com</I>) into the 
field, and click <B>here</B>. 



</0L> 
<P> 

<F0RM NAME="myForm"> 

E-mail address: 
<BR> 

//Calling i sAVal idEmai 1 ( ) with the value typed into the ema i 1 Address text field. 
<INPUT TYPE="text" SIZE="25" NAME="emai lAddress" 
onBl ur="i sAVal idEmai 1 (thi s . val ue) "> 

</F0RM> 



</B0DY> 
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Putting It Alt Together: The Order 



rutting it ah logetner 
OpBmCmndation Script 




In the example in this section, you see how to create an intelligent form that 
validates user data two different ways: 



is* At the field level: You can validate independent fields as soon as the 
user tabs away from them. An independent field is one that you require 
(such as a credit card number for a credit card purchase), regardless of 
what a user types for any other field. (You see an example of field-level 
validation in "Creating an input-validation script" earlier in this chapter.) 

At the form level: You want to validate dependent fields when the user 
finishes filling out a form and clicks the form's Submit button. A depen- 
dent field is one that you might or might not validate, depending on 
what a user types for one or more other fields. For example, you might 
not require an e-mail address unless your users specify that they want 
to receive your e-mail newsletter. 




Numerical assistance 



JavaScript offers a handful of built-in functions 
that help you identify whether a value is numeric: 

parselnt( ): Tries to turn a value into an 
integer; returns either the integer value or 
f al se (if the value can't be turned into a 
number). These two lines illustrate: 

var result = parselntt "123" ) 

The resul t variable is set to the numeric 
value 123. 

var result = parselntt " Emi ly" ) 

The result variable is set to NaN (Not a 
Number). 

parseFl oat( ): Tries to turn a value into 
a floating-point (decimal) number; returns 
either the floating-point value or f a 1 se (if 
the value can't be turned into a number). 
These example show you how: 



The resul t variable is set to the numeric 
value 45 . 6. 

var result = parselntt "grumpy" ) 

The resul t variable is set to NaN. 

is* i sNaN( ): This function, which stands for 
is Not a Number, returns true if the value 
passed to it is not a number and f al se if 
the value passed to it is a number. (Yeah, I 
know — double negatives are confusing, 
aren'tthey?) Here are two examples: 

var result - i s Na N C 3 ) 

The result variable is set to false 
because 3 is a number. 

var result = i sNaNt "George Clooney") 

The resul t variable is set to true because 
a string value is not a number. 



var result = 



parseFl oat("45. 6") 
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The example that you see in this chapter is for a fictitious Web design company 
called Webmeister. To allow visitors to request a personalized quote for Web 
rvices, the company decided to create an HTML form and attach 
t scripts to meet these design goals: 



Validate the existence of entries in required fields: To submit a success- 
ful quote request, Webmeister's visitors must enter a service category, a 
first and last name, and at least one contact method (telephone or e-mail). 
In the code in the following section, the exi sts ( ) function implements 
these validation checks. Existence validation takes place in this example 
at both the field and form levels. 

Validate two pattern fields: The scripts must check the phone number 
and e-mail address to ensure they're valid. The i sAVal i dPhoneN umber ( ) 
and isAVa 1 i dEma i 1 ( ) functions implement these validation checks, 
respectively, on a form level. 

*<" Validate numeric fields: The generic i sANumber( ) function assists in 
validating phone numbers on a form level. 
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Figure 12-2 shows you what the completed quote request example looks like. 

To see the code responsible for Figure 12-2, 1 i stl207 . htm, in its entirety, 
open the file from the companion CD-ROM. 



Figure 12-2: 

An order 
form for the 

fictitious 
Webmeister 

company. 



Onler foim example (fiom JavaScript Fni Dummies. 4th eililioul - Mi croso ft Internet Explotei 
File Edit View Favorites Tools Help 

Qeack • O' @| f^/lsearch -^Favorites t^Media £J . # S " lJ E§| & €) 

Address C:\em\write\jsfd4e\scriptslilistl206.htm vj Q Go 



Which of qui services .lie yoti interested in? (Check all [hat apply.) 

Website design □ Website maintenance □ Online promotion □ 

Why do you w.int .i Website? (Or, if you aheady h.we one. what do you use it for?) 



Do you w<int to incoiporate photos into your site? 

yes © no O 

Do you h.we one or more pioducts you'd like to promote sell on your site? 

yes © no O 

Aie you a small business owner, or do you work for .i large corporation? 

small business owner ® employee O 



If you woikfoi a coiporation. what's the name? | 

Is there auvthiiMi else uou think we need to know in older to dive vou an accurate mice uuote? 



.6] Done 



g£TextPad-[C;\em... [ g) 506331 C 



i My Computer 



3 Order form e 
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Testing for existence 



require that users provide a value for an HTML form field by attach- 
fistence-validation script to one of that field's event handlers. 

&^ SSSe \ In this example, the Webmeister developers want to ensure that folks request- 
ing a quote enter both their first and last names. Listing 12-4 shows you the 
JavaScript code necessary to implement this common design requirement. 

Listing 1 2-4: Testing for the Existence of an Input Value 

function exists(inputValue) { 
var aCharExists = false 



// Step through the inputValue, using the charAtO 
// method to detect non-space characters. 



for (var i=0; i<=inputValue. length; i++) ( 
if (inputValue. charAUi ) != " " && inputValue. charAUi ) != "") ( 
aCharExists = true 
break 

) 

1 



return aCharExists 

1 

//The value of the firstName field is sent to the existsO function as soon as 
the user tabs away. 

<INPUT TY P E= " TEXT " NAME="f i rstName" S I ZE= M 25 " onBl ur="i f ( ! exi ststthi s . val ue) ) { 
al ert( ' PI ease enter a first name'); )"> 



//The value of the lastName field is sent to the existsO function as soon as 
the user tabs away. 

<INPUT TY P E= " TEXT " N AME= " 1 a s t Name " SIZE="35" onBl ur="i f ( ! exi sts ( thi s . val ue ) ) { 
al ert( ' PI ease enter a last name') )"> 



The code in Listing 12-4 works on these principles: The exi sts ( ) function 
accepts an input value (named, appropriately enough, i nputVal ue). As 
soon as the exi sts ( ) function receives this value, it checks the value to see 
whether it contains a non-white-space character. Either the non-white-space 
character or the default value of f al se is returned to the calling code. 

If you look lower in the listing, you see the two input fields that call the 
exi sts ( ) function, including this one: 
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<INPUT TY P E= " TEXT " NAME= " f i rstName" SIZE="25" onBl ur="i f ( ! exi sts( thi s . val ue) ) ( 
al ert( ' PI ease enter a Tirst name'); )"> 



ding JavaScript statement defines a value for the f i rstName field's 
onBl ur event handler. When a user blurs the f i rstName field, the value of 
the f i rstName field is passed to the exi sts ( ) function. If exi sts ( ) returns a 
value of f al se (the ! operator is shorthand for "if this thing is false"), a pop-up 
message appears to remind the user to enter a first name. Now, when the user 
clicks in the Your First Name field and then tabs away without entering a value, 
the code causes a reminder message to appear (see Figure 12-3). 



Testing far a numeric Value 

You can require that users provide a valid number for an HTML form field by 
attaching a numeric validation script to one of that field's event handlers. For 
an example of the JavaScript code required to perform this validation, take a 
peek at Listing 12-5. 



Figure 12-3: 

Everybody 
must have 
(and enter) 
a name. 



Outer foim example {from JilvaSclipt Foi Dummies. 41ti edition) - Mictosoft Internet Ex|iloiei Q(3)B 

File Edit View Favo||e» Tools Help 9 

Qeock - O 0 B P*-* ^-Favorites *J>Media ^» ' ' ■ *r O ' |J H| ft © 

Addles ^] C:\em\write\isfd4e\scripts\listl206.htm v ] fl Go 



If you woikfoi a coiporation. what's the name? ; 

Is there anything else you think we need to know in older to (jive yon tin accurate price quote? 



Your first name: 



How would yon like ns to contact yon (e 

e-mail D 
telephone □ | 



Mictosoft Internet Explor er £3 



¥ \ Please enter a first name 



| Submityour quote request 



Done 



I^TextPad- [C:\em.,. X &f] 506331 Chl2 J,d... 
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Listing 1 2-5: Testing to Ensure That a Value Is Numeric 



// Assume everything is okay right off the bat. 
var result = true 

// If parseFloatO returns false, a non-numeric 
// character was detected in the first position. 

if ( ! parseFl oat( i nputVal ue) ) I 
result = false 

1 

// Otherwise, check the 
// rest of the digits. 



function isAValidPhoneNumber(inputValue) I 

for (var 1=0; i <=i nputVal ue . length; 1++) { 
//Calling the isANumberO function from inside another custom function 
if ( i sANumber (inputValue.cha rAt ( i ))) I 
di gi tsFound++ 



The i sANumber( ) function definition uses the built-in JavaScript function 
parseFloatO to weed out all values beginning with something other than 
a number. (The parseFloatO function returns a value of N a N if the first 
character that it encounters can't be converted to a number.) 




else I 



for (var i=0; KinputValue. length; i++) ( 
if (inputValue. cha rAt ( i ) != " ") ( 

if (! parseFl oat( i nputVal ue.charAtt i )) ) ( 
result = false 
break 



// Return true (inputValue is 
// fal se (it's i nval id) . 



a valid number) or 



return result 
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In the event that the first character is a number but subsequent characters 
aren't (for example, to catch a mistake like 5F5- 1212), i sANumber ( ) steps 
ill the remaining characters in i nputVa 1 ue to see whether it can 
ion-numeric character. 

The last few statements in Listing 12-5 show you an example of how you can 
call the i sANumber ( ) function. In this example, the isAValidPhoneNumberO 
function (which you get to examine in detail in the next section) calls the 
i sANumber( ) function as part of its own validation routine. 



Testing for patterns 

Listing 12-1, shown previously in this chapter, demonstrates how you might 
go about validating a very common pattern: the e-mail address. Here, you see 
an example of another common use for pattern validation: making sure a user 
types a valid telephone number. Listing 12-6 shows you what I mean. 

Listing 12-6: Validating a Phone Number 

//Defining the isAValidPhoneNumberO function 
function i sAVal i dPhoneNumber ( inputValue) I 
var di gi tsFound = 0 

// Step through the inputValue to see how 
// many digits it contains, 
for (var 1=0; i<=inputValue. length; i++) { 
if (isANumber(inputValue.charAt(i ))) I 
di gi tsFound++ 



// If inputValue contains at least 10 

// digits, assume it is a valid phone number. 

if (digitsFound >= 10) I 

return true 

1 

el se { 

return false 



//Calling the isAValidPhoneNumberO function 
if ( ! i sAVa 1 i dPhoneNumber ( inputValue) { 

alertC'We can't contact you via phone unless you give us your phone number 
(make sure to include your area code). Thanks!") 

1 
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The code you see in Listing 12-6 checks to see that a value contains at least 
ten digits; if so, that value passes the test as a valid telephone number. 



s you want to create more rigid patterns than this. For example, 
you may want to ensure that users include parentheses and dashes in their 
telephone numbers. For an example of how to accomplish this (and some 
caveats), see the sidebar "An alternative approach to pattern-matching." 



Form-teVet Validation 




Sometimes you want to validate fields immediately, as soon as a user enters a 
value or tabs away from the field. (Listing 12-4 shows you an example of inde- 
pendent field validation.) 

But sometimes you want to wait until the user finishes entering information 
before you begin your validation. For example, the Webmeister form allows 
users to specify whether they want to be contacted by e-mail or by telephone. 
At least one option must be selected, but triggering validation the instant a 
user tabs away from the e-mail field would be useless (and annoying). After 
all, that user might very well be intending to select the phone number option; 
you have no way of knowing until the user finishes filling out the entire form. 



An alternative approach to pattern-matching 



If you need to define a more rigid pattern than 
the telephone number example that I describe in 
Listing 1 2-6, take a look at the JavaScript code 
in this sidebar, which requires that users enter 
a phone number in the following format: 

(512)555-1212 

As you see in the following example, the sub- 
string( ) method associated with the built-in 
JavaScript string object lets you break a 
value into chunks and ensure that each chunk 
is valid. For example, this code instructs the 
interpreterto extract and inspectthe parenthe- 
ses, area code, exchange, and line portions of 
the phone number separately. 



The benefit of this approach? It ensures that 
users type exactly what you want them to type, 
which reduces the chance of miscommunication. 
The drawback isthatyou're expecting a userto 
type a bunch of characters exactly the way you 
want — a process that is difficult atbest! (Keep 
in mind thatthe Web is global, and patterns that 
might be familiarto you might not be familiar at 
all to folks in other parts of the world.) 

A good design rule to follow is this: If you 
absolutely must gather information in a specific 
format, by all means adapt this example of 
JavaScript code for your own purposes. But if 
you can get by with fewer checks (like the 
phone number validation routinethatl describe 
in Listing 12-6), go for it. 



Chapter 12: Handling Forms 



function isAPhoneNumber(entry) ( 
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.openParen = to the first character of entry. 
Paren = entry, substri ng ( 0 , 1 ) 



// Set areaCode = to the next 3 characters, 
var areaCode = entry.substring(l,4) 

// Set closeParen = to the 5th character, 
var closeParen = entry.substring(4,5) 

// Set exchange = to characters 6, 7, and 8. 
var exchange = entry. substring^, 8) 

// Set dash = to the 9th character, 
var dash = entry. substrings, 9) 

// Set line = to the 10th through 13th characters, 
var line = entry. substring^, 13) 

// fhe following if statement checks all the pieces, 

// like so: 

// if openParen is not equal to "(" 

// OR the areaCode is not a number 

// OR the closeParen is not equal to ")" 

// ... and so on . 



if ( 

(openParen != "(") 
( h'sANumber(areaCode)) 
(closeParen != ")") 
( h'sANumber(exchange)) 
(dash !- "-") 
( h'sANumber(line)) 
){ 

alertC'Incorrect phone number, 
following format: (123)456-7890") 



Please re-enter in the 



1 



1 



<F0RM NAME="feedbackForm"> 
<BR>P1 ease enter your home phone number 
<BR>in the following format: (123)456-7890 
<INPUf fYPE="text" NAME="homePhone" VALUE=" 
onESl ur="isAPhoneNumber(this.val ue)"> 



SIZE=13 
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iving 'em a piece of your mind 



Giving users appropriate, timely feedback can be 
the difference between a confusing Web site and 
one that is efficient and pleasant to use. The fol- 
lowing are a few things to keep in mind as you 
decide when and how to interact with your users. 

DON'T SHOUT!! Nobody likes being yelled at, 
and messages THAT ARE IN ALL UPPERCASE 
LIKE THIS AND END IN EXCLAMATION POINTS 
ARE YELLS! Say what you need to say; just use 
normal capitalization and punctuation. 

In general, be specific. Sometimes, you don't 
particularly care what a usertypes (for example, 
if you're asking forfree-form comments on your 
product). At other times, what the user types is 
crucial. For the times when it's crucial, be sure 
to let the user know up front, right on the page, 
what format is expected. 

When you do need to pop up an error message, 
make sure that it tells users precisely what's 
wrong with their input. (Inval id format. 
Please retry . doesn't count!) 

Give your users a break. Just because you're 
now a card-carrying expert at validating user 
input doesn't mean you have to pop up an error 
message ei/e/ytime you detect an error. In some 



cases, you might be able to massage (geek- 
speak for modify} the input data to suit yourself 
without bugging the user at all. For example, just 
because you'd like to see a value in uppercase 
letters doesn't mean the user has to enter it in 
uppercase letters. Instead of displaying an error 
and requesting that the user retype the entry,for 
example, you can just as easily take the input 
and change it to uppercase yourself using the 
toUpperCase( ) method ofthe stri ng object. 

Pat your users on the back. Don't reserve feed- 
back for only those times when a user enters 
something incorrectly. Reassuring users that 
things are proceeding as planned is just as useful. 
For example, let users know when a form passes 
all validation checks. 

Test 'til you drop. Make sure (and this should go 
without saying, butyou never know)thatyoutest 
your form carefully for every conceivable error 
(and series of errors) that a user might reason- 
ably be expected to make. Few things are more 
frustrating to users than getting tangled in an 
endless loop of errors that refuse to go away, 
even afterthe user has figured out what's wrong 
and corrected it! 



A better approach for dependent field validation is to wait until users try 
to submit their forms before executing your validation scripts, as shown 
in Listing 12-7. Now, if the user attempts to submit a form without entering 
either a phone number or an e-mail address, the script generates an error 
and prevents the form from being submitted. To see how this code behaves 
at runtime, take a look at Figure 12-4. 
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£j Or. lei form example (from JavaScript Foi Dummies, 4tli edition} . Microsoft Intel ii^t Explorer 

File Edit View F.ivoiites Tools Help 



pBoofe 

If uoii woi 



Figure 12-4: 

Using 
form-level 
validation to 
ensure that 
at least one 
option is 
filled. 



(Back • Q • 3 g) fijps^r* -jfoFavoHtes ^Mri. O 0- ^ H - [J ™l & Id 



^ern'i'.'Vnt-? i, isfd4e'i5i:iipr_s'i Iistl206.htm 



If you woikfoi <i co 1 p 0 1 ati.o 1 1 . wh ut's The .name? 
Istheie anything else yoi 



Microsoft Internet Explorei 



Please let us know whether you'd like us to contact you by e-mail or by 
phone. Thanks! 



Your first name: 



L 1st name: 



Eileen 



Dover 



How would yon like ns to contact yon (e-mail, phone, or both)? 

e-mail □ j 

telephone □ I 



Submit your quote request 



6] Done 



g"TextPad-[CAem... 1 506331 Chl2_f,d.. 



3 Order form exam.. 



j My Computer 



Listing 1 2-7: Implementing Dependent Validation Checks with the 
validateForm() Function 

<HTML> 
<HEAD> 

<TITLE>0rder form example (from JavaScript For Dummies, 4th EditionX/TITLE) 

<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
<!-- hide this script from non-javascript-enabled browsers 

//////////////////////////////////////////////////////////// 
// Checks to see whether a value contains non-numeric data. 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
function isANumber(inputValue){ 

// Assume everything is okay, 
var result = true 
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//_If parseFloatO returns false, a non-numeric 
haracter was detected in the first position, 
IparseFloat(inputValue)) I 
result = false 



// Otherwise, we still have to check the rest of 
// the digits, so step through the inputValue one 
// character at a time and set result = false 
// if any non-numeric digits are encountered, 
el se I 

for (var 1=0; i <i nputVal ue. length; 1++) ( 
if (inputValue. charAtti ) != " ") ( 

if ( ! parseFl oat( i nputVal ue.charAU i ) ) ) ( 
result = false 
break 

) 




// Return true (inputValue is a valid number) or 
// fal se (it's i nval id) . 



return result 

1 



////////////////////////////////////////////////////// 
// Checks to see whether an input value contains "@" 
// and "." 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
function i sAVal id Ema il (inputValue) { 



var foundAt = false 
var foundDot = false 



// Step through the inputValue looking for 
// "@" and "." 



for (var i=0; i <=i nputVal ue . length; i++) I 
if (i nputVal ue.charAt(i) == "@" ) ( 
foundAt = true 

1 

else if (inputValue. charAtti ) == ".") { 
foundDot = true 

) 
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f both "0" and "." were found, assume 
'he e-mail address is valid; otherwise, 
// return false so the calling code knows 
// the e-mail address is invalid. 



if (foundAt && foundDot) ( 
return true 

1 

el se ( 

return false 



////////////////////////////////////////////////////// 
// Checks to see if an input value contains ten or more 
// numbers. This approach lets users type in U.S.- 
// style phone formats, such as (123)456-7890, as 
// well as European-style (such as 123.456.7890). 

iiiiiiiiiiiiiiiiitiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiwiu 

function i sAVal idPhoneNumber( i nputVal ue) { 
var digitsFound = 0 

// Step through the inputValue to see how 
// many digits it contains. 

for (var 1=0; i<=inputValue. length; i++) ( 
if (isANumber(inputValue.charAt(i ))) { 
di gi tsFound++ 



// If inputValue contains at least 10 
// digits, assume it is a valid phone number, 
if (digitsFound >= 10) ( 
return true 

1 

el se { 

return false 

1 

1 



////////////////////////////////////////////////////// 
// Check for the existence of characters. 
// (Spaces aren't counted.) 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
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ffn^t i_on exists(inputValue) { 
aCharExists = false 



// Step through the inputValue, using the charAtO 
// method to detect non-space characters. 

for (var i=0; i <=i nputVal ue. length; i++) ( 
if (inputValue. charAtti ) != " " && inputValue. charAUi ) != "") 
aCharExists = true 
break 



return aCharExists 

1 



////////////////////////////////////////////////////// 
// Perform cross-field checks that can't be performed 
// until all of the data has been entered. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ml 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 f{ml 1 1 1 



II val idateFormt ) performs all dependent field validation 



function val idateForm( ) { 



var rc = true 



// Dependent check #1: ensuring a service category is selected 

/////////////////////////////////////////////////// 

// Visitors need to check one of the following 

// choices in order to receive an accurate quote: 

// whether they're interested 

// in design, maintenance, or promotion services. 

/////////////////////////////////////////////////// 



if ( Idocument.quoteForm.designChoice. checked && 
! document .quote Form. ma i ntChoi ce. checked && 
! document .quoteForm. promoChoi ce. checked) I 

al ert ( "PI ease check whether you're interested in our design, 
maintenance, or promotion services so we can give you a more 
accurate quote. Thanks ! " ) 
rc = false 



// Dependent check §2: ensuring that a company name exists if a 
// user checked "employee" 
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1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

II If visitors are employees, they need to specify 
he name of their company. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 



if (document. quoteForm.bizChoi ce[l] . checked) { 
if ( Idocument. quoteForm.corpName. value) { 

al ert( "You ' ve specified that you're an employee, so could you please 

type in the name of the company you work for? Thanks!") 
rc = false 



// Dependent check #3: double-checking that both first and 
// last names exist 

/////////////////////////////////////////////////// 
// Visitors need to include their first and last 
// names. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

if ( Idocument .quoteForm.fi rstName.val ue 
! document .quote Form. 1 astName. val ue) { 

alertC'Please type in your entire name (both first and last). Thanks!") 
rc = false 



// Dependent check #4: ensuring that users enter either an e-mail 
// address or a phone number 

/////////////////////////////////////////////////// 
// Visitors need to specify either an e-mail 
// address or a telephone number. 
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
if ( idocument .quoteForm.emai 1 Choi ce. checked && 
Idocument.quoteForm.phoneChoice. checked) { 

alertC'Please let us know whether you'd like us to contact you by e-mail 

or by phone . Thanks ! " ) 
rc = false 



// Dependent check #5: ensuring that an e-mail address exists 
// (if a user chose the e-mail contact option) 

/////////////////////////////////////////////////// 
// If visitors tell us they want us to contact them 
// by e-mail, alert them if they haven't put in 
// their e-mail address (same with telephone). 
/////////////////////////////////////////////////// 
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i f_ ( document. quoteForm. email Choice. checked && 

isAVal idEmai 1 (document .quote Form. email Add r.val ue) ) { 

alertC'We can't contact you via e-mail unless you give us 
e-mail address. Thanks!") 



a val id 



rc = false 



el se 



if (document. quoteForm. phoneChoice. checked && 

! i sAVal i dPhoneNumbert document .quoteForm. phoneNumber . value)) { 

alertC'We can't contact you via phone unless you give us your phone 
number (make sure to include your area code). Thanks!") 
rc = false 



if (rc) { 

// If the rc variable is non-zero, then the form data 
// passed with flying colors! 

al ert( "Thanks ! We'll contact you with a quote shortly.") 

1 

return rc 

1 



// --> 

</SCRIPT> 

</HEAD> 



<B0DY> 

<Hl>0rder form example</Hl> 
<HR> 



<P> 
<HR> 

<TABLE WIDTH="100r C E L LS P AC I N G= " 1 0 " C E L LP ADD I N G= " 1 0 " BORDER=0> 

<TR> 
<TD> 

<F0NT FACE="Helvetica, Arial, Verdana" SIZE="2"> 

//Dependent validation checks execute when the user attempts to submit the form 

<F0RM NAME="quoteForm" onSubmi t=" return val idateForm( ) ; "> 

<P> 

<B>Which of our services are you interested in?</B> (Check all that apply.) 

<P> 

Website design <INPUT TYPE="CHECKBOX" NAME="desi gnChoi ce" VALUE="desi gn"> 

      
Website maintenance <INPUT TYPE="CHECKBOX" NAME="mai ntChoi ce" 

VALUE="maint">      
Online promotion 

<INPUT TYPE="CHECKBOX" NAME="promoChoi ce" VALUE="promo"> 



<P> 
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</TEXTARI 



<B>Why do you want a Website? (Or, if you already have one, what do you use it 

for?)</B> 



|A NAME="purpose" C0LS="60" R0WS="5" W RA P= " V I RTU A L " > 
EXTAREA) 
<P> 

<B>Do you want to incorporate photos into your site?</B> 
<BR> 

yes <INPUT TYPE=" RADIO" NAME="pi xChoi ce" VALUE="hasPix" CHECKED) 
no <INPUT TYPE=" RADIO" NAME="pi xChoi ce" V A LU E= " h a s NoP i x " > 

<P> 

<B>Do you have one or more products you'd like to promote/sell on your si te?</B> 
<BR> 

yes <INPUT TYPE=" RADIO" NAME="cdChoi ce" VALUE=" has Products " CHECKED) 

no <INPUT TYPE=" RADIO" NAME=" cdChoi ce" VALUE=" hasNoProducts " > 

<P> 

<B>Are you a small business owner, or do you work for a large corporati on?</B> 
<BR> 

small business owner <INPUT TYPE=" RADIO" NAME= " bi zChoi ce" VALUE=" i sOwner" 
CHECKED) 

employee <INPUT TYPE=" RADIO" NAME="bi zChoi ce" VALUE=" i s Empl oyee" > 
<P> 

<B> I f you work for a corporation, what's the name?</B> 

<INPUT TY P E= " TEXT " NAME="corpName" SIZE="25"> 

<P> 

<B> I s there anything else you think we need to know in order to give you an 
accurate price quote?</B> 

<P> 

<TEXTAREA NAME="extraInfo" COLS="60" R0WS="5" W RA P= " V I RTU A L " > 

</TEXTAREA> 

<P> 

<TABLE> 

<TR> 
<TD> 

<F0NT FACE="Helvetica, Arial, Verdana" SIZE="2"> 
<B>Your first name:</B> 

</TD> 
<TD> 

<F0NT FACE="Helvetica, Arial, Verdana" SIZE="2"> 
<B>Last name:</B> 

</TD> 
</TR> 
<TR> 
<TD> 

<INPUT TY P E= " TEXT " NAME= " f i rstName" SIZE="25" onBlur="if ( ! exi ststthi s . val ue) ) { 
alert( ' Please enter a first name'); )"> 

</TD> 
<TD> 

<INPUT TY P E= " TEXT " NAME= " 1 a st Name " SIZE="35" onBl ur="i f ( ! exi sts( thi s . val ue) ) { 
alertt ' Please enter a last name') )"> 

</TD> 
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<TR> 

<TD C0LSPAN="2"> 

<F0NT FACE="Hel vetica , Arial, Verdana" SIZE="2"> 

<B>How would you like us to contact you (e-mail, phone, or both)?</B> 

</F0NT> 

</TD> 

</TR> 



<TR> 

<TD ALIGN="RIGHT"> 

<F0NT FACE="Hel vetica , Arial, Verdana" SIZE="Z"> 

e-mai 1 <INPUT TYPE="CHECKBOX" NAME="emai 1 Choi ce" VALUE="email "> 



</F0NT> 

</TD> 

<TD> 



<INPUT TYPE="TEXT" NAME="emailAddr" SIZE="35"> 

</TD> 
</TR> 
<TR> 

<TD ALIGN="RIGHT"> 

<F0NT FACE="Helvetica, Arial, Verdana" SIZE="2"> 

telephone <INPUT TYPE="CHECKBOX" NAME="phoneChoi ce" VALUE="phone"> 



</TD> 



<TD> 

<INPUT TY P E= " TEXT " NAME="phoneNumber" SIZE="15"> 

</TD> 
</TR> 
< /TAB LE> 
<P> 

<CENTER> 

<INPUT TYPE="SUBMIT" VALUE="Submi t your quote request") 
      <INPUT TY P E= " RESET " VALUE="Clear the Torm"> 

</HTML> 



In the code in Listing 12-7, the val i dateForm( ) function, which performs 
five dependent field validation routines, executes when the user attempts to 
submit the form. (Attaching the va i dateForm( ) function to the quoteForm 
form's onSubmi t event handler sees to that!) 
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In This Chapter 

Getting acquainted with the difference between events and event handlers 
Taking a look at the events associated with different objects 
Seeing event handlers in action 



7 

M avaScript helps you transform static Web pages into interactive Web-based 
applications. And what's the feature that makes this client-side interactiv- 
ity possible? The humble and lovable event handler. You can think of event 
handlers as little software bungee cords that bind custom JavaScript code to 
events, such as clicking a button or a link, loading a page, typing data into an 
input field, and so on. 

You see examples of event handlers throughout this book. For this chapter, I 
focus on the event handlers that most developers find most useful — the event 
handlers associated with window, mouse, form, and keyboard events. Here 
you find out how to create and attach essential scripts to such user-driven 
events as opening a Web page window, moving a mouse pointer, interacting 
with an HTML form, and pressing keys. 



The Skinny on Events and Etfent Handlers 

In Web programming terms, an event is anything that happens to a Web page. 
Examples of events include 

A window or frame opening or closing 

A mouse pointer moving onto or off of an image, a link, or an HTML form 
v 0 A mouse clicking or double-clicking anywhere on a page 
**" A key being pressed 
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By using JavaScript, you can perform an action in response to any event. For 
example, you can play a welcoming tune when a user opens a Web page; dis- 
Y/exftlanatory text when a user mouses over a certain area of a Web page; 
ffra^jorm data as soon as a user enters it; and create hot keys that perform 
a custom function in response to a keystroke. 



Handling Events 

You handle events in JavaScript by attaching event handlers to individual Web 
page elements. Event handlers are simply attribute-value pairs that allow you 
to capture and respond to events as they occur. 



For example, the following code defines an HTML button that, when clicked, 
calls a custom JavaScript function. In this sample code, the name of the event 
handler is o n C 1 i c k, and the name of the JavaScript function is c a 1 c ( ) . 



<INPUT TYPE="button" f 


IAME="pushButton" VALUE="( 


!al 


:ul ate Total " onCl i 


ck="cal c( ) "> 



Table 13-1 lists the events (in addition to cl i ck) that you can handle in both 
Navigator and Internet Explorer by using JavaScript — along with the Web 
page elements, or objects, that support those events. 




Netscape Navigator and Internet Explorer provide different levels of support 
for event handlers, as they do for so many other features of JavaScript and 
HTML and HTML extensions and . . . well, you get the picture. In addition, 
because event handling is inherently platform-dependent, browsers imple- 
mented on Macintosh and Unix systems offer differing levels of support for 
events. For additional event handling information, point your browser to 



http: //msdn .mi crosoft . com/works hop/ a uthor/dhtml /reference/events .asp 



Table 13-1 


Common Cross-Browser Web Page Elements 
(Objects) That Support Event Handlers 


Event Handler 


Supporting Objects 


Event (Event Handler 
Triggered When ...) 


onAbort 


Image 


The image loading is 
interrupted. 


onBl ur 


Button, Checkbox, Fi 1 ell pi oad. 
Password, Radi o. Reset 
Sel ect, Submi t. Text, 
Textarea, wi ndow (frame) 


The element loses input 
focus. (Clicking out of or 
tabbing away from an 
element takes awaythat 
element's input focus.) 
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Event Handler Supporting Objects Event (Event Handler 

Triggered When ...) 

nge Checkbox, Fi 1 ellpl oad. The element changes 

Password, Radi o, Sel ect, (for example, the user 

Text, Textarea types text into a Text 

elementor clicks a 
Radi o button) and loses 
input focus. 

onClick Button, Checkbox, document. The element is clicked a 



Fi 1 ellpl oad. Image, Link, single time (combination 

Password, Radi o. Reset, of onMouseDown and 

Sel ect, Submi t. Text, Textarea onMouseUp). 



onDblClick 


Button, Checkbox, document, 
Fi 1 ellpl oad, Image, Link, 
sion 

Password, Radi o, Reset, 

Sel ect, Submi t, Text, Textarea 


The element is clicked 
twice in quick succes- 

(double-clicked). 


onError 


Image 




The image doesn't finish 
loading for some reason. 
(Perhaps the image file 
doesn't exist or is cor- 
rupted.) 








onFocus 


Button, Checkbox, Fi 1 ellpl oad. 
Frame, Password, Radi o. Reset, 
Sel ect, Submi t, Text, 
Textarea, wi ndow (frame) 


The element g 
focus. 


ains input 



onKeyDown Button, Checkbox, document. The user presses a key. 



Fi 1 eUpl oad. Image, Link, 

Password, Radi o. Reset, 

Sel ect, Submi t, Text, Textarea 

onKeyPress Button, Checkbox, document. The user presses and 

Fi 1 eUpl oad. Image, Link, releases a key (which 

Password, Radi o. Reset, combines the 

Sel ect, Submi t, Text, Textarea onKeyDown and 
onKeyUp event handlers). 

onKeyllp Button, Checkbox, document. The user releases a 

Fi 1 ellpl oad. Image, Link, previously pressed key. 

Password, Radi o. Reset, 

Sel ect, Submi t, Text, Textarea 

onLoad Image, window (frame) The element loads 

successfully. 
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'andler Supporting Objects 



Event (Event Handler 
Triggered When ...) 



onMouseDown Button, Checkbox, 

document , Fi 1 eUpl oad , Image 
(and Area), Li nk, Password, 
Radio, Reset, Select, 
Submit, Text, Textarea 



The user presses a 
mouse button (but 
doesn't release it). 



onMouseOut Image (and Area), Li n k 



The mouse moves off the 
element. 



onMouseOver Image (and Area), Li n k 



The mouse moves onto 



the element. 




onMouseUp 


Button, Checkbox, document, 
FileUpload, Image (and Area), 
Li nk. Password, Radi o, Reset, 
Sel ect, Submi t, Text, Textarea 


The user releases a 
previously clicked mouse 
button. 


onMove 


window (frame) 


The user moves or resizes 
the window or frame. 


onReset 


form 


The form is reset; either 



the user clicks a Reset 
button, or the program- 
mer invokes the 
form.reset( ) method. 



onResi ze 



window (frame) 



The user resizes the 
window or frame. 



onSubmi t 



form 



The form is submitted; 
either the user clicks a 
Submit button, or the 
programmer invokes the 

form.submit( ) 
method. 



onLlnl oad 



wi ndow 



The user unloads a doc- 
ument (by closing the 
browser or by loading 
another document). 



Many programmers find four categories of event handlers to be the most 
useful: window-related events, mouse-related events, form-related events, 
and key-related events. In the following four sections, I show you examples 
of each of these four important event categories. 



Chapter 13: Handling User-Initiated Events 



p! 



The Event's the thing 



Internet Explorer support 
the concept of an Event object designed for 
advanced event-handling scenarios. In theory, 
you can use the Event object to capture and 
examine nitty-gritty details about an event that 
occurs. For example, if a user clicks a mouse 
button, you can use the methods and properties 
associated with the Event objectto determine 
which mouse button the user clicks and even 
the coordinates of the pointer at the time of the 
click. If a user presses a key, you can use the 
methods and properties associated with the 



Event object to determine which key (or key 
combination) your visitor presses. The possibil- 
ities are numerous. However, JavaScript support 
for the Event object isn't consistent between 
browsers at the time of this writing — and doc- 
umentation for Navigator support is virtually 
nonexistent. For more information on the Event 
object and how it's implemented in Internet 
Explorer, visit 

http : //msdn .mi crosof t . com/workshop/ 
author/dhtml / ref er en ce/ object s/obj_ 
event .asp 



Window ei/ents 

One window event that most Web surfers are familiar with is the pop-up 
advertisement — a tiny (or not-so-tiny) window that appears automatically 
when you load certain Web pages into your browser. Pop-up ads are attached 
to the on Load event handler (and sometimes the onLlnl oad event handler, 
too, which can pelt you with additional pop-up ads as you try to surf away 
from a site). 

In addition to the on Load and onUnl oad event handlers, windows — and 
frames, which are a special type of window — support event handlers includ- 
ing onBl ur, onFocus, onMove, and onResi ze, as Table 13-2 describes. 



Table 13-2 


Window- and Frame-Related Event Handlers 


Event Handler 


Event (Event Handler Triggered When . . .) 


onBl ur 


The element loses input focus. (Clicking out of ortabbing 




away from an element takes away that element's input focus.) 


onFocus 


The element gains input focus. 


onLoad 


The element loads successfully. 


onMove 


The user moves or resizes the window or frame. 


onResi ze 


The user resizes the window or frame. 


onUnl oad 


The user unloads a document (by closing the browser or by 




loading another document). 
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You trigger JavaScript code for a window event by defining a value for the 
window's event handler. For example, the following code displays a goodbye 
when a user unloads (closes or surfs away from) a Web page. 

<B0DY UnUnl oad="al ert( 'Goodbye, and thank you for stopping by my Web site');") 



Mouse events 

Mouse events make cool interactive effects such as rollovers (see Chapter 8) 
and tooltips (see Chapter 11) possible. No such object as mouse exists. 
Rather, mouse events occur when a mouse pointer moves — or is clicked — 
over some other object. For example, the following code ties two functions 

(di spl ayTool Ti p( ) and hi deTool Ti p ( )) to the onMouseOver and 
onMouseOut event handlers associated with an HTML-defined area. 

<MAP name="PicMap" id="PicMap"> 

<AREA SHAPE="rect" C00RDS="226 , 25 ,303 ,82" HREF="#" 
onMouseOut="hideTooltip( ' tool ti p4 ' )" 
onMouseOver="di spl ayTool ti p( event , ' tool ti p4' ) "/> 

Table 13-3 describes additional mouse events — and the objects and event 
handlers associated with those events. 



Table 13-3 Mouse-Related Event Handlers 



Event Handler 


Supporting Objects 


Event (Event Handler 
Triggered When . . .) 


onMouseDown 


Button, Checkbox, document, 
Fi 1 eLIpl oad. Image (and Area), 
Link, Password, Radio, Reset, 
Sel ect, Submi t, Text, Text area 


The user presses a 
mouse burton (but 
doesn't release it). 


onMouseOut 


Image (and Area), Li nk 


The mouse moves off 
the element. 


onMouseOver 


Image (and Area), Li n k 


The mouse moves onto 
the element. 


onMouseUp 


Button, Checkbox, document, 
FileUpload, Image(andArea, 
Link, Password, Radio, Reset, 


The user releases a 
previously clicked 
mouse button. 



Select, Submit, Text, Textarea 
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Form events 



DropBoQ; 




IAdefines a handful of form elements, or controls (push buttons, radio 
to k rrsT check boxes, and so on). Each of these elements is associated with 
appropriate event handlers. 

For example, in the life of a button, several events can occur. That button 
can be clicked, double-clicked, receive input focus, and lose input focus, for 
example. JavaScript event handlers can detect and handle each of these sepa- 
rate events — click, double-click, focus, and blur. Take a look at the following 
code to see what I mean: 

<INPUT TYPE="button" NAME= " pus hBu tton " VALUE=" Push me!" 
onCl i ck="doSomethi ng( ) ; "> 

This statement, which is a mixture of HTML syntax and inline JavaScript 
code, defines an HTML button element. Along with the TYPE, NAME, and 
VALUE attributes, the statement defines an onCl i ck event handler for the 
button. At runtime, when a user clicks the Push Me! button, the JavaScript 
interpreter automatically calls the function doSomething( ). Table 13-4 lists 
additional event handlers for form elements. 



Table 13-4 


Evenl 


t Handlers for Form Elements 




Event Handler Supporting Form 


1 Elements 


Event (Event Handler 
Triggered When . . .) 


onBlur Button, Check 
Password, Rad 


box, Fi 1 eLIpl oad, The element! 
i o, Reset, Sel ect, focus. (Clickir 


Dses input 
ig out of or 



Submi t. Text, Textarea tabbing away from an 

element takes awaythat 
element's input focus.) 



onChange Checkbox, Fi 1 eLIpl oad, The element changes 

Password, Radi o, Sel ect, Text, (for example, the user 
Textarea types text into a Text 

element or clicks a 
Radi o button) and loses 
input focus. 



onCl i ck 


Button, Checkbox, FileUpload, 


The element is clicked a 




Password, Radi o, Reset, Sel ect. 


single time (which com- 




Submi t, Text, Text a rea 


bines the onMouseDown 






and onMouseUp event 






handlers). 



(continued) 
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Table 13-4 (continued) 
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'andler Supporting Form Elements Event (Event Handler 

Triggered When . . .) 



onDblClick Button, Checkbox, Fi 1 eUpl oad, The element is clicked 
Password, Radi o. Reset, Sel ect, twice in quick succes- 
Submi t. Text, Textarea sion (double-clicked). 



n n Fn r i j ^ 


Rutton rherkhnx Filellnload 


The element gains input 




Password, Radi o. Reset, Sel ect, 
Submi t, Text, Textarea 


focus. 




n n 1/ p v n nw n 

U 1 1 l\C J UUWI 1 


R 1 1 1" t" n n rhprkhny Filpllnlnarl 

UU LLUII, Ul ICL MJUA, 1 1 1 CUU 1 U Q U, 

Password, Radi o, Reset, Sel ect, 
Submi t, Text, Textarea 


The user presses a key. 


nnl^PvPrp^^ 

U 1 1 l\C Jf 1 r too 


Ruttnn rherkhnx Filpllnln^d 
Password, Radi o, Reset, Sel ect, 
Submi t, Text, Textarea 


The user presses 
and releases a key 
(which combines the 

onKeyDown and 
on Key Up event 
handlers). 


onKeyUp 


Button, Checkbox, Fi 1 eUpl oad. 
Password, Radi o, Reset, Sel ect, 
Submi t, Text, Textarea 


The user releases a 
previously pressed key. 


onMouseDown 


Button, Checkbox, Fi 1 eUpl oad. 
Password, Radi o, Reset, Sel ect, 
Submi t, Text, Textarea 


The user presses a 
mouse button (but 
doesn't release it). 


onMouseUp 


Button, Checkbox, Fi 1 eUpl oad, 
Li nk. Password, Radi o. Reset, 
Sel ect, Submi t, Text, Textarea 


The user releases a 
previously clicked 
mouse button. 


onReset 


form 






The form is reset; either 

thp iispr Hirk<: a Rp<:pt 


button, or the program- 
mer invokes the 
form, reset ( ) method. 


onSubmi t 


form 






The form is submitted; 



either the user clicks a 
Submit button, or the 
programmer invokes 

the form.submit( ) 
method. 
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window events for good, not evil 

5omETol?!fthflnP|3Tjp-up ads are inherently evil, some surfers download and install to avoid 

and some think they're a legitimate use of Web seeing pop-up ads. Know, too, that many surfers 

technology. Wherever you fall in the debate, be refuse to revisit sites which bombard them with 

aware that pop-up-killer software exists, which pop-up ads. 



Keyboard events 



Keyboard-related events occur when a user presses a key while a Web page 
is loaded. In addition to capturing the overall key Press event, you can 
separately capture (and respond to) the user's pressing the key and then 
releasing the key 

The following sample code ties a custom JavaScript function named 
di sa 1 1 owlnput ( ) to the on Key Press event handler associated with 
the document object: 


<B0DY onKey Press="di s 


all owlnputt ) 


"> 






For details on the other objects that support 
Table 13-5. 


keyboard events, check out 


Table 13-5 


Keyboard-Related Event Handlers 





Event Supporting Objects Event (Event Handler 



Handler Triggered When . . .) 

onKeyDown Button, Checkbox, document. The user presses a key. 
Fi 1 eLIpl oad, Image, Li nk, 
Password, Radi o. Reset, Sel ect. 
Submit, Text, Textarea 

onKeyPress Button, Checkbox, document. The user presses and 

Fi 1 eLI pi oad. Image, Link, releases a key (which 

Password, Radi o. Reset, Sel ect, combines the onKeyDown 

Submi t, Text, Texta rea and onKeyUp event 

handlers). 

onKeyUp Button, Checkbox, document. The user releases a 

Fi 1 eLIpl oad. Image, Li nk, previously pressed key. 

Password, Radi o. Reset, Sel ect, 
Submi t, Text, Textarea 
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Chapter 14 

DropBoo ba s ndlin fl Runtime Errors 



In This Chapter 

Getting familiar with runtime errors and exceptions 
Taking a peek at the try, catch, and throw statements 



Support for exception handling — a technique for anticipating and recov- 
ering gracefully from errors that has long been supported in languages 
like C++ — was finally implemented for JavaScript in Internet Explorer 5.x 
and Navigator 6.x. 



Exceptional Basics 

Technically, an exception is any unexpected condition, good or bad, that 
occurs during the processing of a script. Practically speaking, however, an 
exception is virtually always an error. Exceptions can result from 

A JavaScript error 
An unanticipated user-input error 

A problem with a user's browser, operating system, or hardware 
configuration 

Trying to make your code access objects (such as array elements, properties, 
files, and so on) that don't exist is a common source of exceptions that might 
occur while your JavaScript code is executing in someone's browser. 

If you're creating a commercial JavaScript application, you want to make lib- 
eral use of JavaScript's exception-handling abilities. Allowing your users to 
view cryptic, system-generated errors such as Fi 1 e Not Found or No Such 
Object is unacceptable in a commercial environment. Although anticipating 
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and handling those errors by using try and catch blocks might not prevent 
the errors from occurring, it does give you the opportunity to 

sure users. You can use JavaScript's exception-handling functions 
. _.splay a message telling users that an error has occurred but is being 
handled appropriately. (This approach is much better than allowing a 
cryptic system message or blank screen to confuse and alarm users.) 

Provide users with helpful, appropriate suggestions. You can explain 
the cause of the error and provide users with tips for avoiding that error 
in the future. 



DropBooks 

tr> Av. 



Handling Exceptions 

You handle exceptions by creating two special JavaScript functions, or blocks: 
a try block and a catch block. Then, in any statement that might generate 
an error, you use the keyword throw to throw an error to the catch block. 
The code in Listing 14-1 shows you how. 

Look for the code in Listing 14-1 in the file 1 i s 1 1 4 0 1 . htm on the compan- 
ion CD. 



Listing 14-1: Handling Exceptions with try-catch and throw 



<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 

function getMonthName (monthNumber) ( 

// JavaScript arrays begin with 0, not 1, so 
// subtract 1. 

monthNumber = monthNumber - 1 

// Create an array and fill it with 12 values 
var months = new Array( "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul " , 
"Aug" , "Sep" , "Oct" , "Nov" , "Dec" ) 

// If the monthNumber passed in is somewhere 

// between 0 and 11, fine; return the corresponding 

// month name. 

if (months[monthNumber] != null) { 
return months[monthNumber] 

1 

// Otherwise, an exception occurred, so throw 

// an exception. 
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// This statement throws an error 
// directly to the catch block, 
hrow "InvalidMonthNumber" 



1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
II The try block wraps around the main JavaScript 
// processing code. Any JavaScript statement inside 
// the try block that generates an exception will 
// automatically throw that exception to the 
// exception handling code in the catch block. 
////////////////////////////////////////////////////// 

// The try block 
try { 

// Call the getMonthName( ) Tunction with an 

// invalid month § (there is no 13th month!) 

// and see what happens. 

alert(getMonthName(13)) 

alertC'We never get here if an exception is thrown.") 



// The catch block 
catch (error) { 



alertC'An " + error + " exception was encountered, 
program vendor.") 

// In a real-life situation, you might want 

// to include error-handling code here that 

// examines the exception and gives users specific 

// information (or even tries to fix the problem, 

// if possible. ) 



Please contact the 



Take a look at Figure 14-1 to see the error that running the code in Listing 14-1 
generates in Internet Explorer. 



Figure 14-1: 

Houston, 
we have 
an error. 



Microsoft Internet Explorer 



An InvalidMonthNumber exception was encountered. Please contact the 
program vendor. 
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The first code executed in Listing 14-1 is the code that you see defined in the 
try block: 

tMonthName(13)) 

Because only 12 months are defined in the months array, passing a value 
of 13 to getMonthName( ) causes an exception (" I nval i dMonthN umber") 
to be thrown, as shown here: 

function getMonthName(monthNumber) { 

throw "InvalidMonthNumber" 

All thrown exceptions are processed automatically by whatever code exists 
in the catch block, so the message that you see in Figure 14-1 (and defined in 
the catch block code shown in Listing 14-1) appears automatically when the 
exception is thrown. 

If you want to write truly airtight JavaScript code, you need to identify all the 
events that could possibly cause an exception in your particular script (such 
as actions the user could take, error conditions the operating system could 
generate, and so on), and implement a try catch block for each. 

Depending on your application, you might want to include more processing 
code in the catch block than the simple pop-up message shown in Figure 14-1. 
For example, you might want to include JavaScript statements that examine 
the caught exception, determine what kind of exception it is, and process it 
appropriately. 




You aren't limited to a string literal when it comes to identifying a thrown 
exception. Instead of I nvali dMonthN umber, you can create and throw an 
elaborate custom exception object (by using the f uncti on and new opera- 
tors that I describe in Chapter 3). 



For more information on how Netscape implements exception handling 
(including examples), visit 

http://developer.netscape.eom/docs/manuals/js/core/jsguide/stmtsov.htni#1011537 
To see how Microsoft does the same for Internet Explorer, check out this page: 

http://msdn.microsoft.com/library/default.asp7url-/library/en- 
us/jscript7/html /jsstmtrycatch .asp 
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"1 tat Know how it happened, dittoes 
an applet in the toasto and song^utj 
in ftorag keeps bur nirgf my -tpast ." 
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In this part . . . 

M*raxX V begins with a list of some great JavaScript-related 
V Web sites that are full of useful information about all 
aspects of JavaScript. If you feel the need to communicate 
with real people about your JavaScript scripts, Chapter 15 
even provides you with a list of some user groups that 
enable you to do just that. 

These online resources are followed by a chapter explain- 
ing the most common mistakes that people run into when 
implementing Web pages (along with tips on how to avoid 
them). And finally, no programming book worth its salt 
would be complete without at least a few handy debugging 
techniques. Chapter 17 provides you with lots of bug-related 
tips that make debugging at least entirely bearable, if not 
downright pleasant! 



Chapter 15 

pBook^D Ten (Or So) Online 
JavaScript Resources 



In This Chapter 

Finding and using JavaScript tutorials 
Finding cool JavaScript examples online 

Taking advantage of the essential JavaScript-related newsgroups 



■ ^^etting help on how to do something has never been easier than it is 

right now. Why? The Internet, of course! From its roots in government 
and university installations, the Internet remained a close-knit, mostly acade- 
mic community until as recently as a decade ago. Inevitably, commercialism 
reared its ugly head and has had a tremendous effect — and not all bad, 
either — on all things Net. (For example, the commercialism of the Internet 
is directly responsible for the proliferation of Web tools and languages such 
as JavaScript.) 

Although marketing and advertising have become common on the Internet, 
the spirit of sharing and intellectual collaboration hasn't yet been snuffed 
out. Helping other people (and maybe showing off a little in the process) 
is a fundamental joy. And because access to the Internet is relatively cheap 
and easy, everybody and their dog indulges — as you see when you visit the 
URLs and newsgroups that I list in this chapter. 



Ten Web Sites to Check Out 

With no further ado, then, on to the good stuff: a list of irresistible JavaScript- 
related Web resources. You find tips, tricks, tutorials, examples, and up-to-the- 
minute documentation. The site's URL follows a description of the goodies 
offered. 
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Netscape 



cape DevEdge site contains a wealth of information on getting started 
iScript, including a complete language reference, how-to articles, and 
sample code. It also offers a downloadable JavaScript debugger. 

http://devedge.netscape.com 



Microsoft 

Microsoft maintains an information-packed site devoted to its JavaScript- 
compatible language, JScript. Documentation, tutorials, sample code, and 
access to JScript-related newsgroups are just some of the great resources 
that you find here. 

http://msdn.microsoft.com/scripting/jscript/default.htm 



BuiUer.com 



The JavaScript section at CNET Builder.com features tips and tutorials in 
addition to copy-and-paste JavaScript code. 


http://builder.com.com/1200-31-5084860.html 















Webmonkey 



Webmonkey maintains a killer JavaScript code library containing not just a 
wealth of scripts but a handy browser reference chart, cheat sheets on HTML 
and CSS, and more — all free for the taking. 

http: //hotwi red . lycos . com/webmonkey /reference/j a vascr i pt_code_l i brary 



Project Coot's JavaScript QuickStarts 

Project Cool's JavaScript QuickStarts offer hands-on JavaScript (and DHTML) 
tutorials. From basic to advanced, all are organized into neat, bite-sized chunks 
perfect for beginning JavaScript programmers. 

www.devx.com/projectcool 
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Stop, thief! 



I describe in this chapter 
are commercial sites, and without exception, 
the JavaScript source code they offer is clearly 
marked "for free download." (You might have to 
register your e-mail address before you can 
download, though, so these companies can 
stick you on their electronic mailing lists.) 

Butifyou're looking for scripts, you're not limited 
to commercial sites. You can cut and paste 
embedded JavaScript source code from anj/site, 
with or without that Webmaster's permission, 
simply by clicking ViewOSource (from Internet 



Explorer) or ViewOPage Source (Navigator). 
(This is one reason why password protection and 
other highly sensitive features aren't typically 
implemented in JavaScript!) 

One caveat: If you run across source that 
includes a copyright notice, contact the author 
or Webmaster and ask for permission before 
using it. If in doubt, don't copy a file line for line; 
instead, take a look at how the programmer 
solved the problem and base your solution on 
the overall approach. 



EarthWeb.com 

The EarthWeb.com JavaScript site offers a huge repository of cut-and-paste 



scripts — scripts for 


everything I 


rom navigation to multimedia. 




http: //webdevel oper.e 


arthweb.com/>> 


ebjs 







Aboutxom 

The Focus on JavaScript Web page at About.com contains articles, tutorials, 
and downloadable scripts on every conceivable JavaScript-related topic — 
including my personal favorite, troubleshooting. 

http ://javascri pt .about . com/ compute/ j a vascr i pt 



iRT.orq 

Internet Related Technologies' JavaScript section offers an exhaustive knowl- 
edge base of frequently asked (and answered) script-related questions. 



http: //developer. i rt.org/script/script.htm 
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WebReference.com 



irence. corn's homegrown JavaScript resource list contains links to 
ivaScript magazines, script archives, and much more. 



www.webreference.com/programming/javascript/index.html 



ScriptSearch.com 



ScriptSearch.com maintains a giant database of JavaScript scripts, from ad 
banners to visual effects. 

http://scriptsearch.internet.com/JavaScript/ 



Not~to~Be~Missed Newsgroups 

The Web sites listed in the preceding sections are a great source of information. 
Sometimes, though, you just have to send a message to a real live person and 
ask a point-blank question. Newsgroups can be a great timesaver, especially 
when it comes to researching specific how-to's and known bugs. 

To access newsgroups, you need to have a news server defined. Generally, 
you set up both a Web server and a news server as part of the browser instal- 
lation and configuration process, but you can always add news support later. 

To participate in a user group, by viewing other peoples' messages or by 
posting your own, you need to switch from surfing the Web to perusing the 
news. To do this, choose WindowOMail & Newsgroups from the Navigator 
menu or ToolsOMail and NewsORead News if you're an Internet Explorer fan. 

For detailed instructions on configuring your browser software to access news- 
groups, check with your browser provider (in other words, contact technical 
support at Microsoft or Netscape) or check out a good book on the topic, such 
as The Internet For Dummies, 9th Edition, by John R. Levine, Carol Baroudi, and 
Margaret Levine Young (Wiley Publishing, Inc.). 

Collectively, newsgroups are known as Usenet. For more information about 
newsgroups — including where to find news, how to write effective posts, 
and even how to create your own — visit 

http://groups.google.com 
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Although user groups come and go, the following have established them- 
selves as the best places to be for JavaScript-related development: 



|^Jf^%u follow only one user group, make it the following one. This group 
is very well attended and is currently the premier JavaScript information 
group for newbies and advanced scripters alike: 

comp.lang. javascript 

(The i t. com p. lang. javascript and de.comp.lang.javascript 
newsgroups are high-traffic Italian- and German-language versions.) 

f" Get answers to HTML questions answered here: 

comp . i nfosy stems . www .authoring. html 

Microsoft's public scripting newsgroup focuses on JScript tips and 
questions: 

microsoft.public.scripting.jscript 
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Chapter 16 

DropBo ^(OrSoTMos. Common 

JavaScript Mistakes (And 
How to Avoid Them) 



In This Chapter 

Catching typographical errors 
Fixing unmatched pairs 

Putting scripting statements between HTML tags 
Nesting quotes incorrectly 
Treating numbers as strings 
Treating strings as numbers 
Finding logic errors 



£very JavaScript author makes mistakes. (Actually, I like to think of it in 
the reverse — it's the JavaScript interpreter that makes the mistakes by 
not figuring out what the programmer means by something. Yeah! That's it!) 
Most of the time, the errors you make fall into one of the categories listed in 
this chapter. The good news is that the errors are all easy to correct. The 
better news is that the JavaScript interpreter tells you quickly — and in no 
uncertain terms — when it encounters an error. 




Check out this book's companion CD to see the sample listings scattered 
throughout this chapter. I've named the files after the listings so you can find 
them easily. For example, you can find Listing 16-1 in the file 1 i s 1 1 6 0 1 . htm. 
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HTML woes 

statements are embedded in HTML files, some of the mistakesyou might find 
are actually HTML mistakes. For example, the following is an HTML error (TYE=" butt on" should 
beTYPE="button"): 

<INPUT TYE="button" NAME="testButton" VALUE="test" 
onCl i ck= ' test ( ) '> 

In this case, the JavaScript interpreter doesn't display an error message because the error doesn't 
concern it. What doeshappen is that your button element fails to display properly. 

If your page doesn't behave as expected and JavaScript doesn't alert you, you're probably deal- 
ing with an HTML error. If this happens (and you can'tfind the solution in this chapter), check out 
a good HTML reference such as HTML For Dummies, 4th Edition, by Ed Tittel and Natanya Pitts 
(Wiley Publishing, Inc.). 




Typing*in~a*Hurry Errors 

Spelling and capitalization errors easily take first prize for being the most 
common mistakes that all JavaScripters make, from the greenest beginner 
to the most highly seasoned veteran. 

The JavaScript interpreter is a stickler for correct spelling: You simply can't 
access an object, property, method, variable, or function unless you spell its 
name properly. For example, the second line of the following bit of code gen- 
erates an error: 

var identification = "ABC"; 

alertCThe id number is " + identificatoin) ; 

The JavaScript interpreter is also case-sensitive, which means you can't substi- 
tute uppercase letters for lowercase letters in object, property, method, vari- 
able, and function names. The following example generates an error because 
the correct name of the method is toLowerCase ( ) (not TOLOWERCASE ( )): 

alertC'Broadcast network ID = " 

+ identification. TOLOWERCASEt ) ) ; 

To detect and correct these errors: 

V Be aware, as you write your JavaScript code, that consistency in spelling 
and capitalization is essential to bug-free statements. 

Take advantage of any spell-checking utilities or point-and-click method 
name insertion utilities that your text editor provides. 
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Breaking Up a Happy Pair 

•pBooks 

taes (coui 



t scripts are typically rife with pairs: pairs of opening and closing 
tags (courtesy of HTML), pairs of parentheses and curly braces, pairs of 
single quotes and double quotes. The JavaScript interpreter treats the stuff 
between the pairs as one entity, so if half of the pair is missing, the inter- 
preter gets confused — mighty confused, in some cases! 

The following are specific examples of happy couples that you don't want to 
break up in JavaScript. 



Lonely anqte brackets 

Looking at the following code, you'd think that the display would include two 
text elements: one to hold a first name and one to hold a last name. It doesn't, 
though, because a closing angle bracket is missing. 

<F0RM NAME="myForm"> 

First name: <INPUT TYPE="text" NAME="f i rstName" LENGTH=15 
Last name: <INPUT TYPE="text" NAME="lastName" LENGTH=30> 



If a text element doesn't appear — no error message, no nothing, just blank 
space where the element should have appeared — the likely suspect is a 
missing angle bracket on the line directly before the invisible text element. 



Lonely taqs 

The code that you see in Listing 16-1 depicts a tiny little script, perhaps a first 
attempt at a JavaScript-enabled Web page. At first blush, perhaps you don't 
see anything amiss. If you were to load this script, though, you'd see that 
something is definitely amiss! 



^£Co Listing 16-1: HTML Source Containing a Missing Tag 



<HEAD> 

<SCRIPT LANGUAGE-" JavaScri pt"> 
function testt ) ( 

var aString = "some text" 



(continued) 



Part V: The Part of Tens 



Listing 16-1 (continued) 



dBooKs 



alert ( "aStri ng is " + aString) 

osing </SCRIPT> tag that should be here is missing. 



</HEAD> 
<B0DY> 

<F0RM NAME="myForm"> 

<INPUT TYPE="button" NAME="testButton" VALUE="test" 

onCl i ck= ' teste ) ' > 

<P> 

First name: <INPUT TYPE="text" NAME= " f i rstName" LENGTH=15> 

Last name: <INPUT TYPE="text" NAME=" 1 astName" LENGTH=30> 

</F0RM> 

</B0DY> 

</HTML> 



The absence of the closing </SCRI PT> tag in the preceding code snippet 
causes the page to display nothing — zip, nada, zilch — instead of the button 
and text elements that you expect. 

Whenever elements refuse to appear, check your HTML statements to see 
whether an opening half of a two-part tag, such as<TITLE>,<SCRIPT>, or 
<B0DY>, is missing its closing half (</TITLE>, </SCRI PT>, and </B0DY>, 
respectively). 



Lonely parentheses 

When you look closely at the body of the following teste) function, you can 
easily spot the missing parenthesis on line three: 

function teste) { 

var aString = "some text" 
al ert( "aStri ng is " + aString 

) 

As your JavaScript skills increase, though, you might find yourself putting 
together whopping long statements. Furthermore, each of the whopping long 
statements might contain many pairs of parentheses, often nested a few layers 
deep — and that's when you're most likely to make this kind of mistake. 

Unless the editor that you use to create your script provides an automatic 
parentheses-pair-checking utility, you need to eyeball your code to catch and 
correct this mistake. 
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Lonely quotes 

>od look at the following example: 

<INPUT TYPE="button" NAME="testButton" VALUE="test" 

onCl i ck= ' test ( "hello)') 

The mistake here is that no closing double quote appears after the word 
hello. The preceding code doesn't generate an error; it just disables the 
testButton object's onCl i ck event handler. 

Here's how the corrected statement looks: 

<INPUT TYPE="button" NAME="testButton" VALUE="test" 

onCl ick=' test( "hel 1 o" ) ' > 
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Putting Scripting Statements 
in the Wrong Places 

When you're new to JavaScript, remembering the order of things might be a 
little difficult. For example, JavaScript statements are valid only when they're 
placed between the <SCRI PT> and </SCRI PT> tags or as values assigned to 
event handlers. If you forget and place them somewhere else, you're bound to 
get an unexpected result. 

The good news is that you find out as soon as you load your page and take 
a look at it that something is amiss — because your source code appears 
right there on the page! Check out the source shown in Listing 16-2 to see 
what I mean. 




Listing 16-2: HTML Source Containing Misplaced Scripting Statements 



<SCPJPT LANGUAGE=" JavaScript" TYPE="text/javascript"> 




function testtinputVal ue) { 




alert( "Wow, I sure do love JavaScript!" + 




"\nHere's what the public is saying about JavaScript: 


" + 


i nputVal ue) 




I 

</SCPJPT> 




// The addNumbersO function is incorrectly defined 




// below the closing </SCRIPT> tag. 





(continued) 
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Listing 16-2 (continued) 

addNumbersCnumberOne, numberTwo) { 

rn numberOne + numberTwo 



When you execute the code in Listing 16-2, you don't see a JavaScript error, 
but you do see the text of the addNumbers( ) function displayed on-screen. 
(You don't see a JavaScript error because the JavaScript interpreter can't 
access any statement outside the beginning and ending <SCRI PT> tags — 
unless that statement is a value for an event handler.) 

Moving the </SCRI PT> tag just after the closing brace of the addNumbers ( ) 
function fixes this script, causing the JavaScript interpreter to interpret the 
addNumbers ( ) function as JavaScript code. 

Anytime that you see your well-crafted JavaScript statements displayed in 
living color on your page, you can be pretty sure that the problem is that 
your statements are outside the bounds of the <SCRI PT> and </SCRI PT> 
tags. Move the statements back to where they belong and they should 
behave. 



Nesting Quotes Incorrectly 

Nesting single and double quotes together, like the following lines, is per- 
fectly legitimate: 

onCl i ck="al ert( 'This is an example of nested quotes.')" 

onClick='alert("This is another example of nested quotes.")' 

Just make sure that you don't nest double quotes inside double quotes, or 
single quotes inside single quotes, like this: 

onCl i ck="al ert( "Oops ! Incorrectly nested quotes generate a syntax error!')' 

If you must include a mismatched quote, you can — as long as you escape 
the mismatched quote. Escaping a quote tells the JavaScript interpreter not 
to expect a matching quote. You escape a quote by preceding that quote with 
a backslash, like this: 

onCl i ck="al ert( 'This escaped quote doesn\'t cause a problem.')" 
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end not to make a big fuss over the difference between text and 
numbers — at least, not in most contexts. For example, when you write a sen- 
tence in English, you don't need to do anything different to include a number. 
(Even if you write 333 of them!) 

Numbers and text strings are two very different things to most programming 
languages, though, and that includes JavaScript. In JavaScript, trying to treat 
a number as a string, as shown in Listing 16-3, generates an error every time. 



co Listing 1 6-3: JavaScript Source Containing Statement That Treats a 
Number Like a String 



<SCRIPT LANGUAGE="JavaScri pt"> 
function testlU i nputVal ue) { 

// The boldO method you see in the next line is associated 
// with the String object (not the Number object). 

document .wri te( i nputValue.boldO) 
document. close( ) 

) 

</SCRIPT> 

<F0RM NAME="myForm"> 

// The following onClick event handler 

// sends the number 2 to the testltO function. 

<INPUT TYPE="button" NAME="testButton" VALUE="test" 
onClick='testIt(2)'> 

The problem occurs when the number 2 is passed from the definition of 
the on CI i ck event handler to the testltC ) function, which isn't set up to 
handle numbers. If you look at the test It ( ) function, you can see that it's 
taking whatever the input value is (in this case, the number 2) and trying to 
call the String object's bol d ( ) method on it. And that ain't flying. The only 
thing that you can call a string function on is a string, and 2 isn't a string! 
(If you'd like more information on what a string is, take a look at Chapter 3.) 

Sometimes you are going to want to send a number to a function and have 
that function deal with it as a string. In these cases, all you need to do is add 
lines like the following to your function: 

function testlt(inputValue) { 

// Set up a temporary string variable, 
var aString = "" 
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// Place the input value into the temporary 
tri ng vari abl e . 
ing += inputValue 

all the boldO method on the string version of 
// the inputValue. 
document .wri te(aStri ng.boldt ) ) 

) 

Now you can send whatever value you like to the t e s 1 1 1 ( ) function, and 
t e s 1 1 1 ( ) behaves nicely! 




Treating Strings as Numbers 

The preceding section shows what happens when you treat numbers as 
strings. As you might guess, the reverse — treating strings as numbers — 
also causes grief in JavaScript. Let me explain by way of the code snippet 
shown in Listing 16-4. 




Listing 1 6-4: JavaScript Source Containing Statement That Treats a 
String Like a Number 


function cal cul ateTaxCinputNumber) 

return inputNumber * .50 

I 


{ 







<INPUT TYPE="button" NAME="cal cul ateTaxButton" 

VALUE="Calculate" 
onCl ick=' al ert( "The tax is " + cal cul ateTaxt "baked" ))' > 



When you click the Calculate button, the baked string goes to the cal cul ate 
Tax( ) function, where it's immediately multiplied by .50. Now, if you can tell 
me what the result of baked times . 50 is, you're a better mathematician than 
I'll ever be. (Okay, so maybe it's half-baked!) JavaScript doesn't know, either, 
so it displays a built-in value N a N , which is JavaScript's way of saying "I don't 
know what the heck this is, but I do know it's Not a Number!" 

Once again, in JavaScript as in life, you can do pretty much anything you 
like — if you know how to go about doing it. If you want to create a function 
that expects a number but can deal gracefully with a string, all you need to 
do is add a few lines to the very top of your function. Listing 16-5 shows 
you how. 
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Listing 16-5: JavaScript Source for a Function That Expects a Number 
but Deals with a String 



cal cul ateTaxCinputNumber) { 

//"liiyNumber will be false if inputNumber is a string, 
var myNumber = parseFloat(inputNumber) 

// If the inputNumber was, in fact, a number, 
// perform the necessary calculation, 
if (myNumber) { 

return myNumber * .50 

) 

// Otherwise, display an error. 

el se I 

alertC'A non-numeric value was passed to a function that expected a 
number" ) 
return "unknown" 



<INPUT TYPE="button" NAME="cal cul ateTaxButton" 
VALUE="Cal cul ate" 

onClick='alert("The tax is " + cal cul ateTaxt "baked" ))' > 



In this new, improved, better-tasting version, the first thing the calculate 
Tax( ) function does is see whether it can convert whatever value it receives 
into a number. If it can, it converts the value, if necessary, and then goes on 
to perform its calculations on the converted value. For example, you can 
pass a number or a string such as " 1234 . 56" to cal cul ateTax( ) instead of 
the string baked. If the c a 1 c u 1 a t e T a x ( ) function can't make a conversion 
(what number does " ba ked" convert to?), it recognizes that it can't convert 
this value, doesn't bother to perform any calculations, and alerts the user 
instead. 



Missing the Point: Logic Errors 

Logic errors are the most difficult errors to track down because they don't 
generate one specific type of error message. (You never see the JavaScript 
interpreter spit out a CI ea rl y , that is not how you calculate the 
interest on a 20-year 1 oan message, for example.) 

How could the JavaScript interpreter possibly know what you're logically 
trying to do? Unlike a human, it can't read your code, analyze it, and confer 
with other interpreters to figure out whether your code comes close to 



270 Part V: The Part of Tens 



sy 

DropBodt 



accomplishing some reasonable task. JavaScript just skims your code for 
syntax errors. If you want to give your users the option to submit a form but 
actually submit the form when they indicate Yes — that's up to you. 
t is not your mother! 




The only way to track down logic errors is the old-fashioned way: by studying 
your code, displaying the contents of variables, making changes, and retesting. 

The a 1 e r t ( ) method, as you see in the following example, is very handy for 
displaying the contents of variables throughout your code. Often, when you 
see the contents of variables, you discover a logic error immediately. (For 
example, a value you expect to be 1,000 displays as -3 — and so you know 
that the calculations responsible for that value contain an error.) 

alertt "Made it to the first if-else statement inside the cal cul ateOrder( ) func- 
tion and the value of someValue is " + someValue); 



Neqlectinq Browser Incompatibility 

Few things are more frustrating than spending hours creating a fantastic, 
impressive script, posting it to your Web server, and then having someone 
who visits your Web site e-mail you with the bad news: It doesn't work in my 
Web browser! 

JavaScript support varies not just between Internet Explorer and Navigator, 
but among versions of these browsers, as well. If a script behaves as expected 
in one browser but tanks in another, you've run into the dreaded browser 
incompatibility problem. Here are four suggestions for overcoming this bane 
of every Web developer's existence: 

v 0 Forego the latest and greatest JavaScript features; stick to core features. 

Don't rush to incorporate the latest JavaScript features in each 
browser version; instead; try to rely on tried-and-true, lowest- 
common-denominator features whenever possible. 

f Always check the documentation. 

When sticking to core JavaScript features isn't possible (or desirable), 
go ahead and use proprietary features — just make sure to inspect your 
target browser's technical documentation to determine how the features 
you want to use are implemented. 

• Netscape's client-side JavaScript language reference: 

http: //devedge. netscape. corn/central / javascript 

• Microsoft's JavaScript-compatible JScript language reference: 

http://msdn.microsoft.com/scripting/jscript/default.htm 
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Include browser-detection code. 

■ Chapter 3 shows you how to create a script that detects a visitor's 
L^b^vser on-the-fly and behaves differently based on different browser 
' Viabilities. 

V Always test your scripts in multiple browsers before publishing them. 

Documentation can be wrong, and browser-detection code can malfunc- 
tion. So before you actually post your JavaScript-enabled pages to your 
Web server (thereby exposing them for all the world to see), always test 
them yourself in as many browsers as possible. 

Although the America Online browser has a fairly large market share, it's 
often overlooked by JavaScript developers. You can download your own free 
copy of this browser from http : //free . aol . com. 

Rather than downloading and installing multiple browsers, you can take 
advantage of an online service, such as NetMechanic, to help you spot 
cross-browser bugs at this site: 

www.netmechani c . com/cobrands/zdnet/browsercheck 
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Your Scripts 

In This Chapter 



Comparing code to design specifications 

Tracking down bugs with alerts 

Getting help from online resources 

Watching the code in process 

Breaking up functions 

Turning user errors into useful information 

Getting familiar with JavaScript debugging tools 
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m n Chapter 16, you see some of the most common mistakes (or bugs) that 
5 JavaScript programmers tend to make. This chapter expands on that theme 
iy showing you the quickest, most direct ways to pinpoint and correct any 
iugs that you happen to introduce into your code. Many language compilers 



and interpreters come complete with tools for debugging. Unfortunately, few 
debugging tools exist for JavaScript just yet. I introduce you to those tools later 
in this chapter — along with some great advice for debugging your JavaScript 
code as quickly and easily as possible. 

Debugging is sort of like washing dishes. Neither chore is exactly a ton of 
fun, but both are necessary, and you always feel better when they're finished. 
Debugging doesn't have to be a dreaded chore, though. You might find that, 
with a little help (like the tips presented in this chapter) and a little practice, 
the job gets easier and easier. 
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)&®Qk& \/our Mind! 

Strangely enough, the first step in successful bug extermination involves 
determining whether you've actually encountered one. If your JavaScript 
script doesn't behave the way that you expect it to, you could be dealing 
with a bug. However, your script might be working as designed, and the 
problem is in your understanding of how the script is supposed to work. 

In the old days, programmers created flowcharts — pages and pages of little 
symbols and lines that described how they wanted their programs to behave 
at runtime. Flowcharts have fallen out of favor — not because they were a bad 
idea but because they were nearly as time-intensive to create as the programs 
themselves. 

These days, most programmers find it helpful to write pseudocode as part of 
the design process. Then, during testing, these programmers have something 
to refer to — a touchstone, as it were, to help them clarify whether a poten- 
tial bug lies in their JavaScript code or in their programming logic. 

Pseudocode is a shorthand combination of JavaScript and the programmer's 
natural language. Because this tool is designed to be as easy and natural for 
programmers as possible, no hard-and-fast rules define precisely how to 
write pseudocode. 

Say, for example, that your goal is to calculate the total price (including sales 
tax, if any) for international orders placed through your Web site. Here's an 
example of what your pseudocode might look like: 

1. The user presses the Submit button. 

2. If it's a U.S. order, calculate the tax (look up the tax rate based on 
myForm. state) and store the calculated tax in total Tax 

else {What to do if non-U. S. orders?!} 

3. Multiply the number of widgets (myForm. numWi dgets) ordered by the 
price (my Fo rm . p ri ce). . . . 

As useful as writing pseudocode is to helping you clarify the requirements 
of a Web page, it's absolutely indispensable when it comes to tracking down 
bugs in your logic after you finish implementing your Web page. 
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e Remit of commenting on your 
JavaScript code as you write it can be a great 
help when it comes time to debug that code. 
(You might be surprised at how much you can 
forget between the time you create a script and 
the time when your code misbehaves, which 
can be weeks or even months down the line!) 



If you create pseudocode to help you plan and 
design your scripts, try using that pseudocode 
as the basis for your JavaScript comments. 
Doing so helps the future you (or someone else 
who has to debug your script) understand pre- 
cisely what the code is trying to accomplish. 



Isolating the Bug 

If you encounter a genuine bug, you need to try to home in on it and identify 
precisely which lines of code are affected. Here are some examples to help 
you work backward from the clues: 

Does the problem occur the instant the page loads? If so, the problem 
is probably either HTML-related or in the JavaScript code you set up to 
handle the on Load event. 

Does the problem occur when users type text in an input field? Check 
the onChange and onBl ur event handlers associated with that field. 

When users click a button, do things go haywire? Check that button's 
onCl i ck event handling code. 

V Does something go wrong when users close the window? The culprit is 
probably lurking in your onLlnl oad event-handling statements. 

First, decide on a place to begin your search — say, with the function that's 
called from one of your onCl i ck event handlers. (I call it buggy Functi on ( ).) 
The next step is to dig a little deeper. For example, try adding a test button 
to your JavaScript code that exercises that same function as the following 
one does: 

<INPUT TYPE="button" NAME= " t es tBu tton " VALUE="Test" 
onCl i ck=' buggy Functi on ( 123 , "a be" ) ' > 

In the first line, you're sending the buggy function numeric and string literals. 
This process helps you determine whether the function itself is buggy or 
whether the problem lies with the variables that your original code is passing 
to the function. 
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If the function behaves incorrectly after you pass it numeric and string liter- 
als, you know that the bug is in your function. If it behaves correctly you 
heck the parameters that the original onCl i ck is sending to the 
(See the "Displaying Variable Values" section later in this chapter.) 




One way to isolate a bug is to comment out all the code in a function except 
one or two suspect statements. By using this approach, you can focus on the 
statements that you want to examine in more detail. To comment out a sec- 
tion of code, you place JavaScript comments before each line, like so: 

// someVariable = someResult; 



^jjMJEfl Make a copy of your original HTML or script file before you make any changes. 

Few things are more frustrating than modifying a file beyond recognition, only 
to have it perform even worse than when you started — and then forgetting 
how the code originally looked! You might also want to look into a version 
control tool such as CVS (www . cvshome .org). Version control tools allow 
you to track different versions of files separately so that if you accidentally 
goof up one version, you can always go back to an earlier, working version. 



Consulting the Documentation 

The JavaScript Guide and JavaScript Reference are the most up-to-date 
resources available regarding the JavaScript language as Netscape imple- 
ments it. Bookmarking or downloading these documents in your browser 
helps ensure that they're at your fingertips when you need them! 




http://devedge.net scape . com/central /javascript 

Internet Explorer implements JavaScript through the Microsoft scripting lan- 
guage JScript. Check out the following URL for a complete description of all 
things JScript-related: 

http://msdn.microsoft.com/scripting/jscript/default.htm 



Displaying Variable Values 

A useful debugging technique involves displaying the values of variables at 
various stages in their lives. For example, suppose that you have a function 
whose job is to calculate the total cost of an order. Based on your under- 
standing of the way the total should be calculated, you determine that this 
function always returns an incorrect value; you just don't know why. 
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Seeing what JavaScript thinks is going on at every stage in the process (from 
the beginning of the function right down to the statement that calculates the 
lue) is easy to do with the debugging statements that you see in 
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var pri ce=3 . 50 

function calculatePrice(numberWidgets) I 

// Examine the variable at the beginning of the function. 

alertC'Inside calculatePrice, numberWidgets is " + numberWidgets) 

var total Price - 0 

// No tax calculated on orders of 100 or less 
if (numberWidgets >= 10) I 

// Test to see that the if statement 

// is coded correctly. 

al ert( "Apparently numberWidgets is 11 or higher") 
var tax = calculateTax(numberWidgets * price) 
totalPrice = tax + (numberWidgets * price) 



el se ( 

alertC'numberWidgets is 10 or less so no tax calculated") 
totalPrice = numberWidgets * price 



// Displaying all the values that contribute to a calculation 
// helps you spot errors. 

al ert( "total Pri ce is $" + totalPrice 

+ " based on a per-item price of 

+ price) 

return totalPrice 



The code in Listing 17-1 contains four a 1 ert ( ) calls. Each al ert ( ) displays 
the values of variables at different points in the calculatePriceO logic, as 
shown in the following series of figures: 

V Alert number one shows you what the value of the numberWidgets vari- 
able is at the beginning ofthecalculatePriceO function, as shown in 
Figure 17-1. 

V Alert number two, shown in Figure 17-2, helps you determine whether 
your i f statement is coded correctly. 

Alert number three lets you examine several values at a single point in 
the code, as shown in Figure 17-3. 
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Tracking down bugs with alertQ 



Clicking the Calculate price button causes an alert message to pop up and display values of variables involved in an incorrect 
calculation. 

Examining values at different stages throughout a complex calculation helps you pinpoint faulty logic. 
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Tracking down bugs with alertQ 



Clicking the Calculate price button causes an alert message to pop up and display values of variables involved in an incorrect 
calculation. 

Examining values at different stages throughout a complex calculation helps you pinpoint faulty logic. 
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Tracking down bugs with alertQ 



Clicking the Calculate price button causes an alert message to pop up and display values of variables involved in an incorrect 
calculation. 

Examining values at different stages throughout a complex calculation helps you pinpoint faulty logic. 
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The more knotty and complex your logic is, the more this technique can help 
you pinpoint your bug. But whatever answers you find, keep one thing in mind: 
After you track down the bugs in your script, make sure that you remember to 
remove the alert statements. Forgetting to do so can be embarrassing! 

I once worked with a programmer who thought he'd removed all his debug 
statements, but he missed one. The condition causing the debug statement 
to appear occurred so infrequently that he forgot all about it! Until, that is, 
dozens of folks — including the programmer's boss, his boss's boss, and the 
company's most important clients — were evaluating the application in a 
meeting. You guessed it: Up popped the debug statement! This most unfortu- 
nate and embarrassing situation can be avoided if you search for all the 
occurrences of the a 1 ert ( ) method in your script by using the search/ 
replace function available in your text editor. 



Breaking Large Blocks of Statements 
into Smaller Functions 

Limiting the size of the functions that you create to about a screenful of text is 
good design practice. (You don't have to take my word for it, though. A time 
or two debugging a complex, monster-huge function should convince you.) 
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eases your ability to reuse code. The smaller and more discrete a 
tion is, the more likely you are to be able to reuse that function in 
another context. For example, say you write a large function called 
isAPhoneNumber( ) to determine whether an input value is a valid 
phone number. Removing the statements that deal with numeric valida- 
tion and organizing those statements into a separate function, called 
isANumber( ), gives you a generic function that you can call not just 
from i sAPhoneNumber ( ) but from any other function that requires 
numeric validation (such as i sAVal i dCredi tCardNumber( ), 
i sAVal i dAge ( ), and so on). 

t<" Decreases your frustration level. Small functions are much easier to 
debug than large functions simply because small functions are easier for 
humans to step through mentally and comprehend than their outsized 
counterparts. 



Functions too big to fit on the average monitor display tend to be poorly 
designed from a standpoint of reuse. That is, usually (and I say usually because 
this is just a general rule) when a function gets that big, it's that big because 
you're trying to make it perform more than one conceptual task. Ideally, a 
function is an implementation of just one conceptual task. 



Honing the Process of Elimination 

When you're chasing bugs, sometimes figuring out what isn't causing the prob- 
lem is just as important as figuring out what is. For example, if you have a bug 
in your HTML code, no amount of searching and testing your JavaScript code 
is going to help you correct the problem. 

Although I can't tell you exactly how to pinpoint your errors (if I could, I'd 
be rich!), I can tell you that good programmers have a general pattern they 
follow when they're debugging: 

1. Create several test cases. 

A test case is a single, real-life scenario that describes how a user might 
reasonably interact with your pages. For an educational site, for exam- 
ple, your test cases might include 

• A student searching for a specific piece of information 

• A teacher posting lesson plans 

• A parent interested in school grading policies 
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2. For each test case (make sure you have several), load your pages and 
interact with them. 



If you see a difference between what you expect and what actually happens, 
the first thing to do is to try to figure out whether the problem is related to 
your browser, JavaScript script, or HTML statements. 



A problem with your browser is unlikely to occur unless you've just down- 
loaded and installed a new version or have been doing something in another 
application that might have altered the way that your browser works. 

Symptoms: 

Your browser doesn't come up, or it does come up, but you can't get it to 
load any local files (as opposed to it's being able to load every file except 
the file that you're testing). 

Home-in strategy: 

If you've just reinstalled your browser, try reinstalling it again. If you still 
have problems, browse the technical help or contact the technical support 
line. 



If you're new to JavaScript or HTML, you're likely to make a few HTML errors 
before you get the hang of it. Not to worry, though . . . HTML is one well- 
documented animal! 

Symptoms: 

Your Web page displays only part of what you think it should display (for 
example, buttons or other elements that you can see defined in your HTML 
source are missing). Or conversely, your Web page displays more than you 
expected. (For example, some of your JavaScript statements are splashed 
on the screen.) 




i the way your site behaves and compare what happened to what 
expected would happen for that test case. 



bebuqqinq browser problems 



Tracking HTML buys 
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Home-in strategy: 

4Ctly what displays (or what doesn't). If only the first two elements that 
fed appear, check the source code that defines the second element — 
and every statement after that line of source code. If the second element is con- 
tained within a tag set (for example, between the <B0DY> and </B0DY> tags), 
check to see that the closing tag is placed and spelled correctly 

If JavaScript statements appear that shouldn't, note the very first word in the 
statement that's showing. Then find that word in the HTML source file and 
check the preceding line. Make sure you've remembered to include both 
opening and closing <SCRIPT> and </SCRIPT> tags. 



Checking the JavaScript code 

As a JavaScript programmer, you're likely to make most of your mistakes 
in — well, in your JavaScript code. 

Symptoms: 

Any bug that shows its face before a form is submitted is almost certainly 
a JavaScript bug. Pre-form-submittal bugs can occur in response to a user 
event (clicking a button, for example, or typing text) or in the course of 
calculating some numbers. 

Home-in strategy: 

Here's where your skills at displaying variable values and breaking up functions 
really pay off. After you trace a bug to an event or calculation, try to isolate 
that event or calculation. Create a test button that exercises the functions 
involved. 

Exercising a function means calling it with a variety of parameters to see what 
happens in each case. If a function is long, break it up and exercise each 
resulting function separately. 



Taking Advantage of Others' Experience 

When you hit a hard-shelled bug, you really come to appreciate the Usenet 
user groups (called newsgroups) that Chapter 15 lists. Not only can you 
browse the groups to see whether someone else has already encountered 
the problem you're struggling with, but you can also post a message that 
contains a section of code and a description of the error. Many newsgroup 
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contributors pride themselves on their abilities to debug others' code, and 
technical support people (including some Netscape and Microsoft gurus) 
nitor the newsgroups as part of their jobs. 



Keep in mind that no matter how frustrated you are or how urgent your prob- 
lem is, you should check through the newsgroups archives for a problem 
similar to your own before posting. Chances are good that some similar 
problem has been posted at least once (and maybe a dozen times), and your 
group mates will appreciate your adapting previous posts before making a 
new post. 



Exercising the Time-Honored 
Triat-and-Error Approach 

When all else fails, just do something — anything. Make a change to your 
code, note the change, and then load the page and see what happens. The 
JavaScript interpreter makes testing things quick and easy for you. If the 
code change doesn't work, put the code back the way it was and try again. 
Whatever you do, don't be afraid to try something. The worst thing you can 
do is crash your browser — and believe me, browser crashes aren't fatal. 
(If they were, I sure wouldn't be alive to write this book!) 

If you tend, like me, to be on the conservative side, make a habit of copying 
your source code file to a safe place as soon as it begins to behave and at 
regular intervals thereafter. That way, if the unthinkable happens, and you 
accidentally mangle the file while you're editing it, you can always drop back 
to your most recent good copy. 

The best advice that I can give you is to enjoy yourself. The more mistakes 
you make, the more you can figure things out on your own — and the easier 
creating your next JavaScript-enabled Web page will be. 



Just Try and Catch Me 
Exception Handling! 

Support for exception handling — a technique for anticipating and recovering 
gracefully from errors that has long been supported in languages like C++ — 
was finally implemented for JavaScript in the 5.x and 6.x versions of Internet 
Explorer and Navigator, respectively. 
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Technically, an exception is any unexpected condition, good or bad, that 
occurs during the processing of a script. In reality, however, an exception is 
always an error. Exceptions can result directly from a JavaScript 
unanticipated user input error, or from a problem with a user's 
browser, operating system, or even hardware configuration. Trying to make 
your code access objects (such as array elements, properties, files, and so 
on) that don't exist is a common source of exceptions that might occur while 
your JavaScript code is executing in someone's browser. 



If you're creating a commercial JavaScript application, you want to make lib- 
eral use of JavaScript's exception-handling abilities. Allowing your users to 
view cryptic, system-generated errors such as Fi 1 e Not Found or No Such 
Object is unacceptable in a commercial environment. Although anticipating 
and handling those errors by using try and catch blocks might not prevent 
the errors from occurring, it does give you the opportunity to 

\>* Reassure users. You can use JavaScript's exception-handling functions 
to display a message telling users that an error has occurred but is being 
handled appropriately. (This approach is much better than allowing a 
cryptic system message or blank screen to confuse and alarm users.) 

Provide users with helpful, appropriate suggestions. You can explain 
the cause of the error and provide users with tips for avoiding that error 
in the future. 



You handle exceptions by creating two special JavaScript functions, or 
blocks: a try block and a catch block. (Because these two separate blocks 
are always used together, they're often referred to as the try-catch block.) 
Then, in any statement that might possibly generate an error, you use the 
keyword th row to throw an error. The code in Listing 17-2 shows you how. 




Listing 1 7-2: Handling Exceptions with try-catch and throw 



<SCRIPT LANGUAGE-" JavaScri pt" TYPE=" text / j a vascr i pt " > 



function getMonthName (monthNumber) ( 

// JavaScript arrays begin with 0, not 1, so 
// subtract 1. 

monthNumber = monthNumber - 1 



// Create an array and fill it with 12 values, 
var months = new Array( "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul " , 
"Aug" , "Sep" , "Oct" , "Nov" , "Dec" ) 



// If a month array element corresponds to the 
// number passed in, fine; return the array 
// element. 



if (months[monthNumber] != null) { 
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// ai 



return months[monthNumber] 



therwise, an exception occurred, so throw 
// an exception. 

el se { 

// This statement throws an error 
// directly to the catch block, 
throw "InvalidMonthNumber" 



1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

II The try block wraps around the main JavaScript 

// processing code. Any JavaScript statement inside 

// the try block that generates an exception will 

// automatically throw that exception to the 

// exception handling code in the catch block. 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

II The try block 

try { 

// Call the getMonthName( ) function with an 

// invalid month # (there is no 13th month!) 

// and see what happens . 

alert(getMonthName(13)) 

alertC'We never get here if an exception is thrown.") 



// The catch block 
catch (error) { 

alertC'An " + error + " exception was encountered. Please contact the 
program vendor.") 

// In a real-life situation, you might want 

// to include error-handling code here that 

// examines the exception and gives users specific 

// information (or even tries to fix the problem, 

// if possible). 



Take a look at Figure 17-4 to see the error that running the code in Listing 17-2 
generates in Internet Explorer. 
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Figure 17-4: 

The catch 
block 
handles all 
exceptions 
generated 
in the try 
block. 



B 



•\ An InvalidMonthNumber exception was encountered. Please contact the 
» \ program vendor. 
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The first code executed in Listing 17-2 is the code that you see defined in the 
try block: 

alert(getMonthName(13)) 

Because only 12 months are defined in the months array passing a value of 
13togetMonthName() causes an exception ("InvalidMonthNumber") to be 
thrown, as shown here: 

function getMonthName(monthNumber) I 

throw "InvalidMonthNumber" 



All thrown exceptions are processed automatically by whatever code exists 
in the catch block, so the message that you see in Figure 17-4 appears auto- 
matically when the exception is thrown. 



If you want to write truly airtight JavaScript code, you need to identify all the 
events that could possibly cause an exception in your particular script (such 
as actions the user could take, error conditions the operating system could 
generate, and so on), and implement a try catch block for each. 
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Depending on your application, you might want to include more processing 
code in the catch block than the simple pop-up message shown in Figure 17-4. 
pie, you might want to include JavaScript statements that examine 
t exception, determine what kind of exception it is, and process it 
appropriately. 




You aren't limited to a string literal when it comes to identifying a thrown 
exception. Instead of InvalidMonthNumber, you can create and throw an 
elaborate custom exception object (by using the function and new operators 
that I describe in Chapter 3). 

For more information on how Netscape implements exception handling 
kf (including examples), visit 



o 

It 




http: //devel ope r. netscape. com/docs /manual s/js/core/jsgui de/stmtsov .htm#1011537 

To see how Microsoft does the same for Internet Explorer, check out this 
page: 

http://msdn.niicrosoft.com/library/default.aspTurl =/ library/ 
en-us/jscript7/html /jsstmtrycatch.asp 



Taking Advantage of Debugging Tools 

Both Netscape and Microsoft offer free JavaScript debugging tools. They 
include 

Netscape Navigator's built-in JavaScript console (available for use 
with Netscape Navigator 7.x) 

Microsoft Internet Explorer's built-in error display 

In addition to the built-in debugging tools that I describe in this section, 
Netscape and Microsoft offer standalone script debuggers that you can down- 
load for free. Venkman is the name of the free JavaScript debugger created 
for use with Netscape Navigator 7.x. Although support for this JavaScript 
debugger is spotty at best, you can get the latest documentation (and down- 
load your very own copy) from www .hacksrus.com/~gi no! a/ venkman. 
Microsoft offers a script debugger that you can use to debug JScript scripts 
(as well as scripts written in other scripting languages, such as Microsoft's 
own VBScript). To download a copy of Microsoft's script debugger, point 
your browser to 

www.microsoft.com/downloads/details.aspx7FamilyID-2f465be0-94fd-4569-b3c4- 
dffdfl9ccd99&displaylang=en 
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Netscape's JavaScript console 



e Navigator 7.x comes complete with a JavaScript debugging tool 
fe JavaScript console, which you see in Figure 1 7-5. 



You can display the JavaScript console shown in Figure 17-5 by performing 
either of the following two actions: 

Select ToolsOWeb Developments JavaScript Console from the 
Netscape Navigator main menu. 

v 0 Type javascript: in Netscape Navigator's navigation toolbar and hit 
Enter. 

After you display the JavaScript console, you can debug JavaScript code 
two ways: 

V Load an HTML file containing a script into Netscape Navigator as 
usual. When you do, any errors the script generates appear in the 
console, as shown in Figure 1 7-6. 



Figure 17-5: 

Navigator 
comes with 
a script- 
debugging 
tool called 
the Java- 
Script 
Console. 
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Figure 17-6: 

JavaScript 
errors 
appear in 
Netscape's 
JavaScript 
console. 
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As you can see in Figure 1 7-6, a JavaScript error was detected on line 4 of 
the file error . htm. 

If you take a look at error. htm (a copy of which you find on the com- 
panion CD), you see this HTML/JavaScript code: 



<HTML> 




<HEAD> 




(SCRIPT LANGUAGE- 


'JavaScript" TY P E= " text/ javascript") 


alertC'This is a 


' + probl en) ; 



The JavaScript console message shown in Figure 17-6 reads Error : 
problem is not defi ned. And sure enough, if you count down to 
line 4, you see the variable probl em isn't defined before it's used. 
(You see how to define a variable in Chapter 3.) 

W Enter JavaScript code directly into the console's evaluation field. You 

can type JavaScript code directly into the evaluation field that you find 
on the JavaScript console and click the Evaluate button for instant feed- 
back. Take a look at Figure 17-7 to see what I mean. 
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Figure 17-7: 

Entering 
JavaScript 
code 
directly into 
the console 
gives you 
instant 
feedback. 
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Microsoft Internet Explorer's 
built-in error display 

When you load a JavaScript error-containing Web page into Internet Explorer, 
you see an icon in the status bar at the lower-left side of the screen. Double- 
clicking the icon displays a pop-up window describing the JavaScript error — 
along with hints for fixing that error. Check out Figure 17-8 to see what I 
mean. 

Figure 17-8 shows that Internet Explorer encountered an error on line 4 of the 
HTML file: namely, that pr obi em is undefined. 




Sure enough, if you take a look at the following HTML code (you find a copy 
of the error. htm file on the companion CD) you see that line 4 references an 
undefined variable called probl em. (I demonstrate how to define a variable in 
Chapter 3.) 



<HTML> 
<HEAD> 

<SCRIPT LANGUAGE="JavaScri pt" TYPE="text/javascri pt"> 
alertt "This is a " + problem); 
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Figure 17-8: 

Double- 
clicking the 
status bar 
icon 
displays 
JavaScript 
errors. 
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Problems with this Web page might prevent it from being displayed properly 
or functioning properly. In the future, you can display this message by 
double-clicking the warning icon displayed in the status bar. 

I | Always display this message when a page contains errors. 
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Char: 1 




Error 'problem' is undefined 




Code:0 
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In this part . . . 

/include numerous resources to help you develop more 
complex and exciting scripts. Here, you find a list of 
words that you can't use in your code, as well as plenty 
of shortcuts and objects that you're sure to incorporate. 

JavaScript reserves certain words that you don't want 
to use as variable names, function names, or other user- 
defined elements in your code. Appendix A lists these 
special words. JavaScript also gives you a couple options 
for making sure that the colors you want in your pages 
appear the way you intend (or close to it), which you 
can find out about in Appendix B. 

Although Appendix C doesn't include every possible 
explanation for every possible object, you can find nearly 
all the objects that you're sure to need with their respec- 
tive methods and properties, as well as some tips on which 
ones are browser-conscious. And, finally, you can use the 
special characters in Appendix D to make sure your Web 
pages comply with the demands of the global marketplace 
and the languages of your users. 



Appendix A 

^ JavaScript Reserved Words 



7 he words listed in this appendix mean something special to the JavaScript 
interpreter implemented in the current versions of Navigator and Internet 
Explorer (or are reserved for future versions). If you try to use any of these 
words to do anything other than what they are designed to do, the JavaScript 
interpreter generates an error when you try to run the script. For example, 
don't try to use any of these words to name a variable, a function, a method, 
or an object. 



^^BE^ in addition to the reserved words listed in this appendix, names of existing 

objects, properties, and methods are off-limits when it comes to naming your 
own variables and functions. For example, the JavaScript interpreter ignores 
a custom function named toStri ng ( ) — the name of an existing method. 
Appendix C lists many of the existing JavaScript objects, properties, and 
methods. 



abstract 


boc 


1 ean 




brea k 




byte 


cas 


e 




catch 




char 


cl a 


ss 




commer 


it 


const 


conti nue 




debugc 


ler 


def aul t 


del ete 




do 




doubl e 


el se 




enum 




export 


extends 




f al se 








f i nal 


final ly 




float 




for 


f uncti on 




goto 




if 


impl ements 




import 


i n 


i nstanceof 




i nt 




i interface 


label 




1 ong 




nati ve 


new 




nul 1 




package 


pri vate 




protected 
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public return short 

static super switch 

hronized this throw 

throws transient true 

try typeof var 

void volatile while 



Appendix B 

00 JavaScript Color Values 



7 his appendix offers an alphabetical listing of all predefined colors avail- 
able to you in JavaScript. When you refer to a color in JavaScript code, 



you can use either the human-readable color names (for example, a 1 ice 



bl ue) or their hexadecimal equivalents (F0F8FF). For example, the following 
two JavaScript statements are equivalent: 


document .wri te(someTextStri ng 
document .wri te(someTextStri ng 


. fontco" 
. fontco" 


or( "aqua" ) ) 
or( "OOFFFF") ) 




To be sure that your color combinations result in readable Web pages, make 
sure that you test your Web pages before releasing them for all the world 
to see. 


Color 






Hexadecimal 




al i cebl ue 






F0F8FF 




anti quewhi te 






FAEBD7 




aqua 






OOFFFF 




aquamari ne 






7FFFD4 




azure 






FOFFFF 


bei ge 






F5F5DC 










bi sque 






FFE4C4 


bl ack 






000000 


bl anchedal mond 






FFEBCD 


bl ue 






0000FF 


bl uevi ol et 






8A2BE2 


brown 






A52A2A 


burl ywood 






DEB887 


cadetbl ue 






5F9EA0 



(continued) 
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Color 


Hexadecimal 


■chartreuse 


7FFF00 


■s I* ^ 

J IcXo^l ate 


D2691E 


coral 


FF7F50 


cornf 1 owerbl ue 


6495ED 


cornsi 1 k 


FFF8DC 


crimson 


DC143C 


cyan 


OOFFFF 


darkbl ue 


00008B 


darkcyan 


008B8B 


darkgol denrod 


B8860B 


darkgray 


A9A9A9 


darkgreen 


006400 


darkkhaki 


BDB76B 


darkmagenta 8B008B 


darkol i vegreen 


556B2F 


darkorange 


FF8C00 


darkorchid 


9932CC 


darkred 


8B0000 


darksalmon 


E9967A 


darkseagreen 


8FBC8F 


darksl atebl ue 


483D8B 


darksl ategray 


2F4F4F 


darkturquoi se 


00CED1 


darkvi ol et 


9400D3 


deeppi nk 


FF1493 


deepskybl ue 


00BFFF 



dimgray 



696969 
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Color Hexadecimal 



idodgerbl ue 

DropBo oKS^r 

f 1 oralwhite 



f orestgreen 
f uchsi a 



gainsboro DCDCDC 
ghostwhite F8F8FF 



gold FFD700 



y u i Lien i uu 


DAA520 






808080 




y i cell 


008000 




nrppn vpI 1 rwtki 
y i ccmjc i iuw 


ADFF2F 




honeydew 


F0FFF0 




hotpi nk 


FFfiQR4 












i ndi anred 




CD5C5C 




i ndi go 




4B0082 




i vory 




FFFFF0 




khaki 




F0E68C 




1 avender 


E6E6FA 


1 avenderbl ush 


FFF0F5 


1 awngreen 


7CFC00 




1 emonchi f f on 


FFFACD 


1 i ghtbl ue 


ADD8E6 


1 i ghtcoral 


F08080 


1 ightcyan 


E0FFFF 



1 i ghtgol denrodyel 1 ow FAFAD2 



lightgreen 90EE90 



1E90FF 
B22222 
FFFAF0 
228B22 
FF00FF 
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i—^ i"^ |1 icijitgrey D3D3D3 

UrOpDOOKSpink FFB6C1 

lightsalmon FFA07A 

1 i ghtseagreen 20B2AA 

lightskyblue 87CEFA 

lightslategray 778899 

lightsteelblue B0C4DE 

lightyellow FFFFEO 

lime 00FF00 

limegreen 32CD32 

linen FAF0E6 

magenta FFOOFF 

maroon 800000 

medi umaquamari ne 66CDAA 

mediumblue 0000CD 

mediumorchid BA55D3 

mediumpurple 9370DB 

medi umseagreen 3CB371 

medi umsl atebl lie 7B68EE 

medi umspri nggreen 00FA9A 

medi umturquoi se 48D1CC 

medi umvi ol etred C71585 

midnightblue 191970 

mintcream F5FFFA 

mistyrose FFE4E1 

moccasin FFE4B5 

navajowhite FFDEAD 
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000080 
FDF5E6 



olive 808000 

olivedrab 6B8E23 

orange FFA500 

orangered FF4500 

orchid DA70D6 



pal egol denrod EEE8AA 



)J a 1 c y 1 cell 


98FB98 




1 o 1 1 1 r n 1 1 m' cp 
(Ja ItrLUi L]UU 1 oc 


AFEEEE 




na 1 n 1 at rod 
jJa lev 1 U 1 cLI trU 


DB7093 




p a p d j a w 1 1 1 [J 


FFEFD5 




npa r hni if f 
p e a l. 1 1 \J u \ \ 


FFDAB9 




n p p 1 1 

|JC 1 u 


CD853F 




pink 




FFC0CB 




pi um 




DDA0DD 




powderbl ue 




B0E0E6 




purpl e 




800080 




red 


FF0000 


rosybrown 


BC8F8F 


roya 1 bl ue 


4169E1 




saddl ebrown 


8B4513 


sal mon 


FA8072 


sandybrown 


F4A460 


seagreen 


2E8B57 


seashel 1 


FFF5EE 


si en n a 


A0522D 
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si atebl ue 



si ategray 



snow 



springgreen 00FF7F 
steelblue 4682B4 



tan D2B48C 



teal 








008080 




thistle 


D8BFD8 




tomato 


FF6347 




turquoi se 


40E0D0 




vi ol et 


EE82EE 




wheat 








F5DEB3 




whi te 








FFFFFF 




whitesmoke 








F5F5F5 




yel 1 ow 




FFFFOO 




yel 1 owgreen 




9ACD32 





cococo 

87CEEB 
6A5ACD 
708090 
FFFAFA 



oks 



Appendix C 

Document Object 
Model Reference 



\J ou can think of this appendix as an alphabetical cheat sheet that lists 
&~ the bulk of the objects, properties, methods, and event handlers that 
make up the document object model that you interact with in JavaScript. 
(The built-in functions available to you in JavaScript are also listed in the 
second half of this appendix.) 

The folks who implemented the document object model — Netscape and 
Microsoft — surely had their reasons for beginning some, but not all, object 
names with uppercase letters! JavaScript is a case-sensitive language, which 
means that if an object begins with a lowercase (or uppercase) letter, you 



must access it that way 



Document Object Model 



I've organized the document object model (DOM) alphabetically, by object. If 
you need to look up a particular property or method — say, p r o m p t ( ) — and 
don't know what object it belongs to, take a quick peek at the index that you 
find at the back of this book. 



This appendix is as up-to-date as is humanly possible, but because new 
browser versions appear regularly (each of which might implement a slightly 
different DOM), you might find some minor differences between the DOM 
that your browser supports and the one listed here. In fact, both Netscape 
and Internet Explorer have pledged their intention to continue modifying 
their DOM until that happy day when they both match the ECMA standard 
and developers can count on the same object existing and behaving identi- 
cally in both browsers — but that day hasn't yet arrived. So for the last word 
in object implementation, including detailed descriptions of any of the ele- 
ments you find in this appendix, visit Netscape and Microsoft online. 
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Internet Explorer's DOM: 



pBooKS 



/msdn.microsoft.com/workshop/author/dhtml /reference/ 
objects . asp 




Netscape Navigator's DOM: 

h tt p : //deved ge . net scape. com/1 i bra ry /manuals/2000/ Java script/ 
1 . 5/reference 

Because all the objects in the DOM derive from the Object object (try saying 
that three times fast!), all JavaScript objects inherit the Object object's prop- 
erties and methods. (I tell you this, instead of listing those few properties and 
methods associated with the Object object over and over again for every 
other object, in the interest of saving space.) 



Anchor 



Description: The target of a hyperlink. 

What creates it: <A NAME=" anchorName"> or Stri ng . anchor ( " anchorName" ) 

How to access it: document . anchors [ i ] (individual anchor) or document . 
anchors. length (number of anchors in a document) 

Properties: name, text, x, y 

Methods: None 

Event handlers: None 



Applet 



Description: A reference to a Java applet in a Web page. 

What creates it: <APPLET NAME = "app7e£/Vame"> 

How to access it: doc ument.applets[ 7] or document .appl etName 

Properties: Depends on applet. 

Methods: Depends on applet (sta rt ( ) and stop ( ) supported by convention). 
Event handlers: None 
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Area 



DropBooks 



ion: Defines an area of an image as an image map. 



(See Link.) 



arguments 



Description: A collection of the arguments passed into a function. 

What creates it: functi on functi onNamei) I functi onStatements } 

How to access it: a rguments (from inside a function body) 

Properties: cal 1 ee, cal 1 er, 1 ength 

Methods: None 

Event handlers: None 



Description: A collection of objects. 

What creates it: arr ayNa me = new Array (arrayLength) or arrayName = 
new Array (e7 ementO , el emeriti elementN) 

How to access it: arrayName [ i ] 

Properties: constructor, i ndex, i nput, length, prototype 

Methods: concat(),join(),length(),pop(),push(),reverse(), 
shift(),slice(),sort(),splice(),toSource(),toString(), 
unshi ft ( ), va 1 ueOf ( ) 



Array 



Event handlers: None 
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Boolean 

^ |*^ ^^<|<^-^^on: A boolean (true/false) value. 



What creates it: bool eanName = new Bool ean ( va 1 ue ) ( constructor ) or 
booleanName = Bool ean ( va 1 ue ) (conversion function) 

How to access it: bool eanName 

Properties: constructor, prototype 



Methods: toSource( ), toStri ng( ), val ueOf ( ) 
Event handlers: None 

Button 

Description: A push button included in an HTML form. 

What creates it: < FORM NAME = " formName "> . . . <INPUT TYPE= 
"button" HAME="buttonName" . . . ></F0RM> 

How to access it: document . formName .buttonName or formName . 
el ements [i ] 

Properties: form, name, type, val ue 

Methods: blur(),click(),focus(),handleEvent() 

Event handlers: onBl ur, onCl ick, onFocus, onMouseDown, onMouseUp 



Checkbox 



Description: A check box included in an HTML form. (A check box is a toggle 
switch that lets the user turn a value on or off.) 

What creates it: <FORM NAME="formName"> . . . <INPUT TYPE="checkbox" 
NAME="checkboxName" . . . ></FORM> 
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How to access it: document . formName . checkboxName or formName . 
el ements [i ] 



s: checked, defaultChecked, form, name, type, val ue 
Methods: blur( ), cl i ck( ), focus( ), handleEvent( ) 
Event handlers: onBl ur, onCl i ck, on Focus 




clientln formation 

y* Description: Describes browser configuration details. It is supported only by 
Internet Explorer. (Internet Explorer also supports the navi gator object.) 



What creates it: Automatically created by Internet Explorer. 

How to access it: wi ndow . cl i ent Inform at i on (or just 

cl ientlnformation) 

Properties: appCodeName, appMinorVersion, appName, appVersion, 
browserLanguage, cookie Enabled, cpuClass, onLine, platform, system 
Language, use rA gent, userLanguage, userProfile 

Methods: javaEnabled(),taintEnabled() 

Event handlers: None 



crypto 




^J, Description: This object defines two cryptography-related methods that 
developers can use to implement digital signatures. It is supported only by 
Netscape Navigator. 

What creates it: Automatically created by Netscape Navigator. 
How to access it: wi ndow . crypto (or just crypto) 
Properties: None 
Methods: random( ), si gnText( ) 
Event handlers: None 
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Date 



DropBocte 



on: An object that lets you create, manipulate, and format date and 
es. 



What creates it: 



aDate = new Date ( ) 



aDate = new Date(mf 1 1 i seconds) 



aDate = new DateidateStri ng) 



aDate = new Date {yr_num, mo_num, dayjnum 
[, hr_num, min_num, sec_num, ms_num~]) 



How to access it: a Da te 



Properties: constructor, prototype 



Methods: getDate( ), getDay( ), getFul 1 Year( ), getHours( ), 
getMilliseconds(),getMinutes(),getMonth(),getSeconds(), 
getTime( ), getTimezoneOf f set( ), getUTCDate( ), getUTCDay( ), 
getUTCFull Year( ), getUTCHours ( ), get UTCMi 1 1 i seconds ( ), 
getUTCMi nutes ( ), getUTCMonth ( ), getUTCSeconds ( ), getYear( ), 
parse(),setDate(),setDay(),setFullYear(),setHours(), 
setMi 1 1 i seconds (), setMi nutes ( ), setMonth ( ), set Seconds ( ), 
setTimeC ), setUTCDate( ), setUTCFul 1 Year( ), setUTCHours( ), 
setUTCMillisecondsO, set UTCMi nutes ( ), setUTCMonth ( ), 
setUTCSeconds(),setYear(), toGMTStri ng( ), toLoca 1 eStri ng ( ), 
toSource(),toString(), toUTCStri ng( ), UTC( ), va 1 ueOf ( ) 



Event handlers: None 



document 

Description: The currently loaded HTML document; provides methods for 
displaying HTML output to the user. 

What creates it: <B0DY> . . . </B0DY> 

How to access it: wi ndow . document (or just document) 

Properties: alinkColor, anchors[], applets[], bgColor, cookie, domain, 
embeds, fgColor, formName, forms [], images [], lastModified, 
linkColor, links[], pi ugi ns [ ], referrer, title, URL, vlinkColor 
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Netscape Navigator only: cl asses, height, i ds, tags, wi dth 

net Explorer only: acti veEl ement, al 1 [], charset, children[], 
ultCharset.expando, pa rentWindow, ready State 

Methods: close(),handleEvent(),open(),write(),writeln() 

^ Netscape Navigator only: captureEvents ( ), contextual ( ), 
getSelection(),releaseEvents(),roiiteEvent() 

Internet Explorer only: el ement FromPoi nt( ) 

Event handlers: onCl i ck, onDbl Cl i ck, onKeyDown, onKeyPress, onKeyUp, 
onMouseDown, onMouseUp 



elements O 

Description: A collection of the form elements included in an HTML document. 
What creates it: < FORM NAME=" formName "> . . . </F0RM> 
How to access it: document . formName .el ements [ ] 

Properties: checked, defaultChecked, defaultVal ue, form, length, name, 
options[], selectedlndex, type, value 

Methods: bl ur( ), cl i ck( ), focus (), sel ect( ) 

Event handlers: onBl ur, onChange, onCl i ck, onFocus 



eOent 

Description: One of several predefined occurrences in JavaScript, such as 
a mouse click, a text entry, or a document load. This object is passed as 
an argument to an event handler automatically when an event occurs. 

What creates it: Automatically created by browser. 



How to access it: wi ndow . event (or just event) 




a?/ mS™"' Properties (Netscape Navigator only): da ta, hei gh t, modi tiers, pageX, 
pageY, screenX, screenY, target, type, which,wi dth 
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Properties (Internet Explorer only): altKey, button, cancel Bubbl e, 
cl ientX, cl ientY, Ctrl Key, fromElement, key Code, offsetX, offsetY, 
eturnValue, screenX, screenY, shi ft Key, srcElement, 
r, toElement, type, x,y 

Methods: None 

Event handlers: None 



FiteUptoad 

Description: A file upload element on an HTML form. (A file upload element 
lets users select or specify a file as input to a Web application.) 

What creates it: <F0RM NAME = " formName"> . . . < I N PUT TYPE="file" 
NAME=" fi 1 eUpl oadName" . . . ></F0RM> 

How to access it: document . formName . fi 7 eUpl oadName or formName . 
el ements [i ] 

Properties: form, name, type, val ue 

Methods: blur(),focus(),handleEvent(),select() 

Event handlers: onBl ur, onChange, onFocus 



form 

Description: An HTML form. HTML forms let users input text and interact 
with such elements as check boxes, radio buttons, and selection lists. Forms 
can be configured to post data to a Web server automatically when the user 
submits the form. 

What creates it: < FORM NAME=" formName "> . . . </F0RM> 
How to access it: document . formName 

Properties: act ion, el ements [], encoding, length, method, name, target 
Methods: handleEvent(),reset(),submit() 
Event handlers: onReset, onSubmit 
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Frame 

on: An HTML display frame. 
What creates it: < FRAME) . . . </FRAME> 
(See window.) 

Function 

Description: A chunk of JavaScript code to be preprocessed by the 
JavaScript interpreter. 

What creates it: new Function ([argil, argZV, . . . arg/V]],] 
functi onBody) or functi on functi onName([param[ , par ami, . . 
pa ram]]]) I statements } 

How to access it: funct ionName 

Properties: arguments [], an' ty, caller, length, prototype 
Methods: apply(),call(),toSource(),toString(),valueOf() 
Event handlers: None 

Hidden 

Description: A nondisplayed HTML form field useful for holding and transmit- 
ting calculated values to a Web server. 

What creates it: < FORM NAME = " formName "> . . . <INPUT 
TYPE="hidden" NAME=" hi ddenName" . . . X/FORM) 

How to access it: document . formName .hiddenName or formName. 
el ements [i ] 

Properties: form, name, type, val ue 
Methods: None 



DropBooks 
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History 

looks 



on: A collection of URLs that a user has visited. 
What creates it: Automatically created by browser. 
How to access it: wi ndow . hi story, frame . hi story, or just hi story 
Properties: current, 1 ength, next, previ ous 
Methods: back(),forward(),go() 
Event handlers: None 

Image 

Description: An image included in an HTML document. 
What creates it: < I MG NAME=" i mageName"> 
How to access it: 

document . imageName 



document . i mages [ i ] 
document.!' mages. length 



Properties: border, complete, height, hspace, lowsrc, name, src, vspace, 
wi dth 

Methods: handl eEvent ( ) 

Event handlers: onAbort, onError, onKeyDown, onKeyPress, onKeyUp, 
on Load 



jaVa 

Description: A top-level object used to access any Java class in the package 
Java .*. 

What creates it: Automatically created by Java-supporting browser. 
(See JavaPackage.) 
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on: The JavaScript representation of a Java array. 
What creates it: Any Java method that returns an array 
How to access it: By calling a method defined by an individual Java applet. 
Properties: 1 ength 
Methods: toStri ng( ) 
Event handlers: None 

JaVaCiass 

Description: JavaScript representation of a Java class. 
What creates it: Automatically created by Java-supporting browser. 
(See JavaPackage.) 

JaVaObject 

Description: JavaScript representation of a Java object. 

What creates it: Any Java method that returns an object type. 

How to access it: By calling a method defined by an individual Java applet. 

Properties: Determined by individual Java applet/method. 

Methods: Determined by individual Java applet/method. 

Event handlers: None 

JatiaPackaqe 

Description: JavaScript representation of a Java package. 

What creates it: Automatically created by Java-supporting browser. 

How to access it: Packages . J a va Package 



DropBooks 
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Event hai 



Properties: Determined by individual Java package. 

: Determined by individual Java package. 
Event handlers: None 



Link 

Description: A hypertext link included in an HTML document. 
What creates it: <A>, <AREA>, or Stri ng . 1 i nk( ) 

How to access it: document . 1 i nks [ i ] (individual link)or document. links, 
length (number of links in a document) 

Properties: hash, host, hostName, href, pathname, port, protocol , 
search, target, text, x,y 

Methods: hand! eEvent ( ) 

Event handlers: onDbl CI i ck, onMouseOut, onMouseOver ( <AREA> ) , 
onCl i ck, onDblClick, on Key Down, on Key Press, on Key Up, onMouseDown, 
onMouseOut, onMouseUp, onMouseOver (<A> or Stri ng . 1 i nk( )) 



location 

Description: The currently loaded URL. 

What creates it: Automatically created by browser. 

How to access it: wi ndow . 1 ocati on (or just 1 ocati on) 

Properties: hash, host, hostname, href, pathname, port, protocol , search 

Methods: reload(),replace() 

Event handlers: None 



Math 

Description: A built-in object containing properties and methods for mathe- 
matical constants and functions. 



What creates it: Automatically created by browser. 
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Methods: 



How to access it: M a t h 

ies: E, LN10, LN2, L0G10E, L0G2E, PI, SQRT1_2, SQRT2 



Methods: abs( ), acos( ), asin( ), atan( ), atan2( ), cei 1 ( ), cos( ), exp( ), 
f 1 oo r( ), 1 og( ), max( ), mi n ( ), pow( ), random ( ), round ( ), si n ( ), sqrt( ), 
tan( ) 

Event handlers: None 



MimeType 



Description: A MIME type (Multipart Internet Mail Extension, such as . pdf) 
^\fFE/?fy supported by the browser. 




What creates it: Automatically created by Netscape Navigator. 
How to access it: 

navi gator . mi meTypes [ 7 ] 
navigator. mi meTy pes [ "type" ] 
nav i gator. plug ins[ 7] .mi meTypes [j] 
navi gator. mi meTy pes. length 

Properties: descri pti on, enabl edPl ugi n, suf f i xes, type 
Methods: None 
Event handlers: None 

navigator 

Description: Browser configuration details. 

What creates it: Automatically created by browser. 

How to access it: wi ndow . navi gator (or just navigator) 

Properties: appCodeName, appName, appVersion, 1 anguage, mimeTypes, 
platform, plugins, use rA gent 
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looks 



Methods: javaEnabled(),plugins.refresh(),preference(),save 
Preferences( ), taintEnabledC ) 



indlers: None 



netscape 



Description: A top-level object used to access any Java class in the package 

netscape . *. 

What creates it: Automatically created by Netscape Navigator. 
(See JavaPackage.) 

Number 

Description: A JavaScript object wrapper for primitive numeric values. 
What creates it: a Number = new Number ( va 7 ue ) 
How to access it: aNumber 

Properties: constructor, MAX_VALUE, MIN_VALUE, NaN, NEGATI VE_ 
INFINITY, POSITIVE_INFINITY, prototype 

Methods: toSource( ), toStri ng( ), val ueOf ( ) 

Event handlers: None 



Object 



Description: The primitive JavaScript object type from which all other 
objects derive. 

What creates it: 

anObject = new Object( ) or anotherObject = new Ob ject(anObject) 
How to access it: anObject, anotherObject 
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Properties: constructor, prototype 

eval ( ), toSourceC ), toString( ), unwatch( ), valueOf( ), 



Event handlers: None 



Option 



Description: An option in an HTML select list. 

What creates it: <F0RM NAME=" formName" XSELECT NAME="se 7 ectName"> 
<0PTI0NX/SELECTX/F0RM> or new Opt i on ([ text [ , valuel, 
defaul tSel ectedl , se lected~\ ] ] ] ) 

How to access it: document . formName . se 7 ectName . opti ons [ 7 ] 
Properties: defaul tSel ected, i ndex, 1 ength, sel ected, text, val ue 
Methods: None 
Event handlers: None 



Packages 



Description: A top-level object that's used to access Java classes from within 
JavaScript code. 

What creates it: Automatically created by Java-supporting browsers. 
How to access it: Depends on Java package. 
Properties: cl assName, Java, netscape, sun 
Methods: Depends on Java package. 
Event handlers: None 
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Password 



DropBocte 




on: A password field included in an HTML form. When a user enters 
a password field, asterisks (*) hide that text from view. 

What creates it: < FORM NAME = " formName "> . . . <INPUT TYPE= 
"password" NAME=" passwordName" . . . ></F0RM> 

How to access it: document . formName .passwordName or formName . 
el ements [i ] 

Properties: defaultValue, form, name, type, value 
Methods: blur( ), focus( ), handleEvent( ), select( ) 
Event handlers: onBl ur, on Focus 

Piuqin 

Description: A plug-in application module installed in Netscape Navigator. 

What creates it: Netscape Navigator (on browser plug-in install). 

How to access it: nav i gator. plug ins[ 7] 

Properties: descri pti on, f i 1 ename, length, name 

Methods: None 

Event handlers: None 



Radio 



Description: A radio button in a set of radio buttons included in an HTML 
form. The user can use a set of radio buttons to choose one item from a list. 

What creates it: < FORM NAME = " formName "> . . . <INPUT TYPE = " radio' 
HAME = " radi oName" . . . ></F0RM> 



How to access it: document . formName . radioName or formName . 
el ements [i ] 
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Properties: checked, def aul tChecked, form, name, type, val ue 

blur( ), cl i ck( ), focus( ), handleEvent( ) 
Event handlers: onBlur, onCl ick, onFocus 



ReqExp 



Description: Contains the pattern of a regular expression. This object pro- 
vides properties and methods for using that regular expression to find and 
replace matches in strings. 

What creates it: / pattern/ fl ags 

new RegExp( "pattern" [ , "flags"~\) 

How to access it: Regular expressions are tricky animals. You use regular 
expressions for pattern-matching applications. The following gives an 
example: 

<SCRIPT LANGUAGE="JavaScriptl.2"> 
aRegul arExpressi on = /(\w+)\s(\w+)/; 
oldString = "John Smith" ; 

newString=oldString.replace(aRegularExpression, "$2, $1"); 

document.wri te(newSt ring) 

</SCRIPT> 



(This script displays Smi th , John.) 
For more information, visit this page: 

http://developer.netscape.com/docs/manuals/js/cl ient/jsref/regexp.htm 

Properties: $1, . . . , $9, $_,$*,$&,$+,$ " ,$', constructor, gl obal , 
ignoreCase, input, lastlndex, lastMatch, lastParen, leftContext, 
mul ti line, prototype, rightContext, source 

Methods: compile(),exec(),test(),toSource(),toString(), 
valueOf ( ) 



Event handlers: None 
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Reset 



DropBocta 



on: A Reset button on an HTML form. This button resets all ele- 
a form to their defaults. 



What creates it: < FORM NAME = " formName "> . . . <INPUT TYPE="reset' 
NAME=" resetName" . . . ></F0RM> 

How to access it: document . formName . resetName or formName . 
el ements [i ] 

Properties: form, name, type, val lie 

Methods: bl ur( ), cl i ck( ), focus( ), handleEvent( ) 

Event handlers: onBlur, onClick, onFocus 



screen 

Description: Contains properties describing the display screen (monitor) and 
colors. 

What creates it: Automatically created by browser. 
How to access it: screen 

Properties: availHeight, avail Left, availTop, avai 1 Width, color Depth, 
height,pixelDepth,width 

Methods: None 

Event handlers: None 



Select 

Description: A selection list included in an HTML form. The user can choose 
one or more items from a selection list, depending on how the list was 
created. 

What creates it: <F0RM NAME = " formName "><S ELECT NAME="se 7 ectName" > 
</SELECTX/FORM> 

How to access it: document . formName .sel ectName or formName. 
el ements [i ] 



DropBotfKS 

Event hai 
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Properties: form, length, name, opt ions, selectedlndex, type 

blur( ), focus( ), handleEvent( ) 
Event handlers: onBl ur, onChange, onFocus 



String 

Description: An object representing a series of quote-delimited characters. 
What creates it: aStr i ng = new Stri ng (" va 1 ue" ) or aString = "value" 
How to access it: a Stri ng 
Properties: constructor, 1 ength, prototype 

Methods: anchor (J, bi g( ), bl ink( ), bol d ( ), cha rAt ( ), charCodeAt ( ), 
concat(),fixed(),fontcolor(), fonts ize(),fromCharCode(), 
indexOfO, i tal i cs ( ), 1 astlndexOf ( ), 1 i nk( ), match ( ), replace(), 
search(),slice(),small(),split(),strike(),sub(),substr(), 
substring( ), sup( ), toLowerCase( ), toSource( ), toString( ), 
toUpperCase( ), val ueOf ( ) 



Event handlers: None 



Style 

Description: An object that specifies the style of HTML elements. 

What creates it: document . classes. className . tagName 

document . contextua 1 ( . . . ) 

document. ids. el ementName 

document. tags. tagName 

How to access it: See the following Web page: 

http://developer. netscape. com /docs/manual s/communicator/dynht 
ml /i ndex . htm 
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Properties (Netscape Navigator only): backgroundColor, background 
Im_age, borderBottomWi dth, borderColor, borderLeftWi dth, border 

kdth, borders tyle, borderTopWidth, clear, color, display, font 
; ontSize, fontStyle, fontWeight, lineHeight, listStyl eType, 
marginBottom,marginLeft, marginRight, marginTop, paddingBottom, 
paddi ngLef t, paddi ngRi ght, paddi ngTop, textAl i gn, text Decora ti on, 
textIndent,textTransform,whiteSpace 



image, oor 
^fiifcit^sdl 
lj$fl\l©fc 



Properties (Internet Explorer only): background, background-Attachment, 
backgroundColor, backgroundlmage, backgroundPosition, background 
PositionX, backgroundPositionY, background Re peat, border, border 
Bottom, borderBottomCol or, borderBottomSty 1 e, borderBottomWi dth, 
borderColor, border Left, borderLeftColor, borderLeftStyle, border 
LeftWidth, borderRight, borderRightCol or, borderRightStyle, border 
RightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, 
borderTopWidth, borderWidth, clear, clip, col or, cssText, cursor, 
display, filter, font, fontFamily, fonts i ze, fonts tyle, fontVariant, 
font Wei ght, height, left, letterSpacing, lineHeight, listStyle, list 
Styl el mage, 1 i stSty 1 ePosi ti on, 1 i stStyl eType, ma r gi n, ma rgi n Bottom, 
ma rg i n Left, marginRight, ma rginTop, overflow, paddi ngBottom, 
paddi ngLeft, paddi ngRi ght, paddi ngTop, pageBreakAfter, pageBreak 
Before, pixelHeight, pixel Left, pixelTop, pixelWidth, posHeight, 
position, posLe ft, posTop, posWi dth, sty leFloat, textAl i gn, text 
De corat i on, textlndent, text Transform, top, vert icalAli gn, 
vi si bi 1 i ty, wi dth, z Index 

Methods: borderWi dths ( ), margins( ), paddings( ) 
Event handlers: None 



Submit 

Description: A Submit button included in an HTML form. This button sends 
the form information to be processed. 

What creates it: < FORM NAME = " formName "> . . . <INPUT 
TYPE="submit" NAME=" submi tName" . . . X/FORM) 

How to access it: document . formName . submi tName or formName. 
el ements [i ] 

Properties: form, name, type, val ue 

Methods: blur(),click(),focus(),handleEvent() 

Event handlers: onBlur, onCl ick, onFocus 
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sun 

on: A top-level object used to access any Java class in the package 

What creates it: Automatically created by Java-supporting browsers. 
How to access it: Packages. sun 
(See Packages.) 

Text 

Description: A text field included in an HTML form. 

What creates it: < FORM NAME = " formName "> . . . <INPUT TYPE="text" 
NAME=" textName " . . . ></F0RM> 

How to access it: document . formName . textName or formName . el ements [ i ] 
Properties: def aul tVal ue, form, name, type, val ue 
Methods: bl ur( ), focus( ), handleEvent( ), select( ) 
Event handlers: onESlur, onChange, onFocus, onSelect 

Textarea 

Description: A text area element (a multiline text input field) included in an 
HTML form. 

What creates it: < FORM NAME = " formName "XTEXTAREA HAME=" texta rea 
Name"> . . . </TEXTAREAX/FORM> 

How to access it: document . formName . texta reaName or formName . 
el ements [i ] 

Properties: def aul tVa 1 ue, form, name, type, val ue 
Methods: blur(),focus(),handleEvent(),select() 
Event handlers: onESlur, onChange, onFocus, onSelect 



DropBocto 
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Window 

p Books 



on: A browser window or frame. 





What creates it: 

<B0DY> 
<FRAMESET> 

<FRAME HAME="frameName"> 
window.open( " wi ndowName " ) 
How to access it: 

self 
wi ndow 

wi ndow . frames [ i ] 
wi ndow . frameName 



Properties: closed, defaultStatus, document, frames [], hi story, 
length, location, Math, name, navi gator, offscreenBuffering, opener, 
pa rent, screen, self, status, top, window 

Netscape Navigator only: crypto, innerHeight, innerWidth,jav, location 
bar, menubar, netscape, outerHeight, outerWidth, Packages, page 
XOf f set, pageYOf f set, persona 1 bar, screenX, screenY, scrollbars, 
statusbar, sun, tool bar 

Internet Explorer only: cl i ent Inf ormati on, event 

Methods: alert( ), blur( ), clearlnterval ( ), cl earTimeout( ), cl ose( ), 
confirm( ), focus( ), move By ( ), moveTo( ), oen( ), prompt( ), resi zeBy ( ), 
resizeTo( ), scrol 1 ( ), scrol 1 By( ), scrol lTo( ), setlnterval ( ), 
setTimeout( ) 

Netscape Navigator only: atob( ), back( ), btoa( ), captureEvents( ), 
d isableExternalCapture(),enableExternal Capture (),find(), 
forward( ), handleEvent( ), home( ), print( ), releaseEvents( ), 
routeEvent(), set Hot key s( ), setResi zabl e( ), setZOptions( ), stop( ) 

Internet Explorer only: n a v i g a t e ( ) 



Event handlers: onBlur, onDragDrop, onError, onFocus, onLoad, onMove, 
onResi ze, onUnl oad 
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N a N (not a number) 

Undef i ned 



Built-in JavaScript Functions 

escape ( ) 

Description: Returns the hexadecimal encoding of an argument in the 
ISO-Latin-1 character set. The es ca pe ( ) function and it's reverse function, 
unescapeO, are typically used to send special characters safely from a 
JavaScript script to another program, such as a Java applet. For example, 
you can encode a special character by using the escape( ) function and 
send the resulting value to another program that can then decode that char- 
acter by using the equivalent of the unescapeO function — and vice versa. 
(Sending special characters without using this encoding process can result 
in errors. You can think of the ISO-Latin-1 character set as a lowest-common- 
denominator language that many programmer languages understand.) 

Syntax: escape( " va 7 ueToBeEncoded" ) 

Example: 

escape("&") // returns the hexadecimal equivalent of & which is "%26" 



eVaiO 

Description: Evaluates a string of JavaScript code without reference to a par- 
ticular object. 

Syntax: eva 1 {"value") where value is a string representing a JavaScript 
expression, statement, or sequence of statements. The expression can 
include variables and properties of existing objects. 

Example: 

evaKnew Stri ng( "2+2" ) ) // returns a String object containing "2+2" 
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isFinite ( ) 



on: Evaluates an argument to determine whether it is a finite 
the argument is N a N , positive infinity or negative infinity, this 
method returns fal se; otherwise, it returns true. 

Syntax: i s Fi n i te ( va 7 ue ) 

Example: 

isFinite(123) // returns true 



isNaJW 






Description: Evaluates an argument to determine whether it is not a number. 
Returns true if passed NaN and f al se otherwise. 


Syntax: i s N a N ( va 1 ue ) 






Example: 






isNaN(123) // returns false 






Number ( ) 






Description: Converts the specified object to a number. 





Syntax: Number (anObject ) 
Example: 

alert (Number(d)) // Displays a dialog box containing "819199440000." 

parse float ( ) 

Description: Parses a string argument and returns a floating point number. 

Syntax: parseFl oat( "val ue" ) 

Example: 

var x = "3.14" // returns 3.14 
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parselnt ( ) 
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on: Parses a string argument and returns an integer of the specified 
ase. (Base 10 is assumed if no radix is supplied.) 

Syntax: parselnt(s£r7'ng[ , radix]) 

Example: 

parselntCllll", 2) // returns 15 
parselnt( "15" , 10) // returns 15 



String ( ) 

Description: Converts the specified object to a string. 
Syntax: str i ng( anObject ) 



Example: 



aDate = new Date (430054663215) 






alert (String(aDate) ) // displays "Thu Aug 18 


04:37:43 GMT-0700 (Pac 


ific 


Daylight Time) 1983." 







taint ( ) 

Description: Adds tainting to a data element or script. (Tainting a JavaScript 
element prevents that element from being passed to a server without the 
end-user's permission.) 

Syntax: tai nt( [dataEl ementName] ) where dataEl ementName is the prop- 
erty, variable, function, or object to taint. If omitted, taint is added to the 
script itself. 

Example: 



taintedStatus=taint(wi ndow.defaul t St at us ) 
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unescape ( ) 

| ) |^ |"^ ^^^*^^$° n: ^ eturns tne ASCII string for the specified hexadecimal encoding 



Syntax: unescape ( " va 1 ue" ) where va 1 ue is a string containing characters 
in the form "%xx", xx being a 2-digit hexadecimal number. 

Example: 

unescapet "K6" ) // returns "&" 



untaint ( ) 



Description: Removes tainting from a data element or script. (Tainting a 
JavaScript element prevents that element from being passed to a server 
without the end-user's permission.) 

Syntax: untai nt( [dataEl ementName~\ ) where dataEl ementName is the 
property, variable, function, or object from which to remove tainting. 

Example: 



untai ntedStatus=untaint( window. default Status) 
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Special Characters 



Sometimes you need to represent special characters in JavaScript strings. 
Common examples of special characters include white space, currency 
symbols, and non-English characters. 

When you represent special characters in JavaScript, you have a choice: 
You can use escape characters, octal, or hexadecimal representations of 
the Web-standard character set Latin-1 (ISO 8859-1), or — for versions of 
Netscape Navigator including 6.0 and later — Unicode. 

Together, the ISO 8859 and Unicode standards allow for literally tens of thou- 
sands of special characters: enough to represent most of the known human 
languages! Although I couldn't fit all of them in this appendix, the following 
tables should cover most of your special character needs. It lists the most 
commonly used special characters, along with both the hexadecimal and 
octal representations JavaScript supports. 

Character sets are evolving standards. To get the very latest scoop on 
JavaScript internationalization and supported character sets — as well as 
to find representations for special characters not listed in this appendix — 
check out the section of Netscape's JavaScript manual that describes support 
for special characters at 

http://devedge.net scape . com/1 i br a ry /manual s/2000/javascri pt/1 . 5/ guide/ 
l dent. html#1009568 

For more information on the Unicode standard, check out the Unicode home 
page at 

www.unicode.org 

The following is example of how you use special characters in JavaScript code: 

alert("\'JavaScript For Dummies\uOOA9\ ' costs $29.99 in the U.S., 195\xA5 in 
Japan, and \24316 in Britain.") 
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Here are the most commonly used special characters: 
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JavaScript Escape 
Characters 



Unicode 



Apostropht 


1 


V 


\u0027 




Backslash 




\\ 


\u005C 




Backspace 




\b 


\u000b 




Carriage return 


\r 


\u000D 




Double quote 


\" 


\u0022 




Form feed 




\f 


\u000C 




New line 




\n 


\u000A 




Tab 




\t 


\u0009 




Octal, hexadecimal, and Unicode representations of other common special 


characters appear in the following lists: 




Octal 


Hex 


Unicode 


Description 


Character 


\240 


\xA0 


\u00A0 


Nonbreaking space 




\241 


\xA1 


\u00A1 


Inverted exclamation mark 


i 


\242 


\xA2 


\u00A2 


Cent sign 


e 


\243 


\xA3 


\u00A3 


Pound sign 


£ 


\244 


\xA4 


\u00A4 


General currency sign 


€ 


\245 


\xA5 


\u00A5 


Yen sign 


¥ 


\246 


\xA6 


\u00A6 


Broken vertical line 




\247 


\xA7 


\u00A7 


Section sign 


§ 


\250 


\xA8 


\u00A8 


Diaeresis or umlaut 




\251 


\xA9 


\u00A9 


Copyright sign 


© 


\252 


\xAA 


\uOOAA 


Feminine ordinal indicator 


a 


\253 


\xAB 


\uOOAB 


Left-pointing double carets 


« 



\254 \xAC \uOOAC Logical not-sign 
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Octal 


Hex 


Unicode 


Description 


Character 




\xAD 


\uOOAD 


Soft hyphen 




>w 


\xAE 


\uOOAE 


Registered sign 


® 


\257 


\xAF 


\uOOAF 


Macron 






\260 


\xBO 


\uOOBO 


Degree sig 


n 


o 


\261 


\xB1 


\uOOB1 


Plus-or-minus sign 


± 


\262 


\xB2 


\u00B2 


Superscript two 




\263 


\xB3 


\u00B3 


Superscript three 




\264 


\xB4 


\uOOB4 


Acute accent 




\265 


\xB5 


\u00B5 


Micron sig 


n 


> 


\266 


\xB6 


\u00B6 


Pilcrow 




11 

II 


\267 


\xB7 


\u00B7 


Middle dot 






\270 


\xB8 


\u00B8 


Cedilla 






\271 


\xB9 


\u00B9 


Superscrip 


t-one 
















\?7? 

\£-l L. 


\xBA 




Masculine 


ordinal indicator 


0 


\273 


\xBB 


\uOOBB 


Right-pointing double carets 


» 


\274 


\xBC 


\uOOBC 


Fraction, one-quarter 


% 


\275 


\xBD 


\uOOBD 


Fraction, one-half 


Vi 


\276 


\xBE 


\uOOBE 


Fraction, three-quarters 


% 


\277 


\xBF 


\uOOBF 


Inverted question mark 


i 



Uppercase Letters 



\300 


\xC0 


\u00C0 


A-grave 


A 


\301 


\xC1 


\u00C1 


A-acute 


A 


\302 


\xC2 


\u00C2 


A-circumflex 


A 


\303 


\xC3 


\u00C3 


A-tilde 


A 


\304 


\xC4 


\u00C4 


A-umlaut 


A 



(continued) 
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Uppercase Letters (continued) 

r\ ^r\f\^ k r\r\ h^^ \ xC5 \u00C5 A-ring A_ 

M ^3C)6 W \xC6 \u00C6 AE ~K 

\307 \xC7 \u00C7 C-cedilla Q 

\310 \xC8 \u00C8 E-grave E 

\311 \xC9 \u00C9 E-acute E 

\312 \xCA \uOOCA E-circumflex E 

\313 \xCB \uOOCB E-umlaut E 

\314 \xCC \uOOCC l-grave I 

\315 \xCD \uOOCD l-acute I 

\316 \xCE \uOOCE l-circumflex \ 

\317 \xCF \uOOCF l-umlaut I 

\320 \xDO \uOODO D-stroke 

\321 \xD1 \u00D1 N-tilde N 

\322 \xD2 \u00D2 0-grave 0 

\323 \xD3 \u00D3 0-acute 0 

\324 \xD4 \u00D4 O-circumflex 0 

\325 \xD5 \u00D5 0-tilde 0 

\326 \xD6 \u00D6 0-umlaut 0 

\327 \xD7 \u00D7 Multiplication sign x 

\330 \xD8 \u00D8 0-slash 0 

\331 \xD9 \u00D9 U-grave U 

\332 \xDA \uOODA U-acute U 

\333 \xDB \uOODB U-circumflex 0 

\334 \xDC \uOODC U-umlaut U 

\335 \xDD \uOODD Y-acute 

\336 \xDE \uOODE THORN 

\337 \xDF \uOODF Small sharp s ( 
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Lowercase Letters 

\xEO \uOOEO a-grave a 

\xE1 \uOOE1 a-acute a 

\342 \xE2 \u00E2 a-circumflex a 

\343 \xE3 \u00E3 a-tilde a 

\344 \xE4 \u00E4 a-umlaut a 

\345 \xE5 \u00E5 a-ring a 

\346 \xE6 \u00E6 ae ae 



\347 \xE7 \u00E7 c-cedilla 5 



\350 


\xE8 


\u00E8 


e-grave 


e 


\351 


\xE9 


\u00E9 


e-acute 


e 


\352 


\xEA 


\uOOEA 


e-circumflex 


e 


\353 


\xEB 


\uOOEB 


e-umlaut 


e 


\354 


\xEC 


\uOOEC 


i-grave 


i 














\355 


\xED 


\uOOED 


i-acute 


i 


\356 


\xEE 


\uOOEE 


i-circumflex 


T 


\357 


\xEF 


\uOOEF 


i-umlaut 


T 


\360 


\xFO 


\uOOFO 


d-stroke 




\361 


\xF1 


\uOOF1 


n-tilde 


n 


\362 


\xF2 


\u00F2 


o-grave 


6 


\363 


\xF3 


\u00F3 


o-acute 


6 














\364 


\xF4 


\u00F4 


o-circumflex 


6 


\365 


\xF5 


\u00F5 


o-tilde 


0 


\366 


\xF6 


\u00F6 


o-umlaut 


0 


\367 


\xF7 


\u00F7 


Division sign 




\370 


\xF8 


\u00F8 


o-slash 


0 


\371 


\xF9 


\u00F9 


u-grave 


u 


\372 


\xFA 


\uOOFA 


u-acute 


u 




(continued) 
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Lowercase Letters (continued) 

\xFB \uOOFB u-circumflex u 

\xFC \uOOFC u-umlaut ii 

\375 \xFD \uOOFD y-acute 

\376 \xFE \uOOFE thorn 

\377 \xFF \uOOFF y-umlaut y 
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7 his appendix explains what's on the CD-ROM that accompanies this book, 
as well as how to install the contents and run each of the examples. Here's 
a sneak-peek at the contents for those of you who just can't wait: 

Full working copies of each of the HTML/JavaScript listings that appear 
in the book 

A wealth of useful JavaScript development tools 
Sound and image files used in the examples 



Getting the Most from This CD 

The best way to get familiar with JavaScript is to load scripts and interact 
with them as you read through each chapter. If it's feasible for you, I suggest 
installing the contents of the CD before you pick up the book (or at least before 
you're more than about a quarter of the way through). Then, when you come 
across a listing in the book, you can double-click on the corresponding HTML 
file you've already installed and bingo! Interactive learning. 

If you really want to make sure that you understand a concept, be sure you 
take time not just to run each file, but to play around with it, too. Change a 
line of JavaScript code and see what happens. You can't go wrong because 
you can just reinstall from the CD. 

The examples are also referenced throughout the text. Some were designed 
to reinforce the concepts you're discovering; others, to be real, live, workable 
scripts that you can incorporate into your own Web pages. Enjoy! 
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System Requirements 

^) ^^|l^^^e that your computer meets the minimum system requirements listed 
here. If your computer doesn't match up to most of these requirements, you 
may have problems in using the contents of the CD. 

i>* A Pentium-based PC, or a Mac OS computer with a Power PC-based 
processor. 

Microsoft Windows 98 or later, Windows NT4 or later, or Mac OS system 
software 8.5 or later. 

W A copy of either Netscape Navigator 7.0 or Microsoft Internet Explorer 6.0. 
(Chapter 1 tells you how to get a copy and install it, if you haven't already.) 

At least 16MB of total RAM installed on your computer. For best perfor- 
mance, I recommend that Windows-equipped PCs and Mac OS computers 
with PowerPC processors have at least 32 MB of RAM installed. 

f At least 25MB of hard drive space on a Windows PC or at least 10MB 
of hard drive space available on a Mac OS computer to install all the 
software from this CD. (You'll need less space if you don't install every 
program.) 

A CD-ROM drive — double-speed (2x) or faster. 

A sound card for PCs. (Mac OS computers have built-in sound support.) 

i>* A monitor capable of displaying at least 256 colors or grayscale. 

is* A modem with a speed of at least 14,400 Kbps and an Internet connection 
(to connect to the World Wide Web). 

If you need more information on the basics, check out these books published 
by Wiley Publishing, Inc.: PCs For Dummies, by Dan Gookin; Macs For Dummies, 
by David Pogue; iMacs For Dummies by David Pogue; Windows 95 For Dummies, 
Windows 98 For Dummies, Windows 2000 Professional For Dummies, Microsoft 
Windows ME Millennium Edition For Dummies, all by Andy Rathbone. 



Usinq the CD 

1. Insert the CD into your computer's CD-ROM drive. The license agree- 
ment appears. 

• Windows users: The interface won't launch if you have autorun 
disabled. In that case, click Start O Run. In the dialog box that 
appears, type D:\start.exe. (Replace D with the proper letter if 
your CD-ROM drive uses a different letter. If you don't know the 
letter, see how your CD-ROM drive is listed under My Computer.) 
Click OK. 
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Note for Mac Users: The CD icon will appear on your desktop. Double- 
click the icon to open the CD and double-click the "Start" icon. 

through the license agreement, and then click the Proceed button 
u want to use the CD. After you click Proceed, the License Agreement 
window won't appear again. 

The CD interface appears. The interface allows you to install the pro- 
grams and run the demos with just a click of a button (or two). 



JavaScript For Dummies Chapter Files 

Each of the chapter listings that appear in the book is contained on the 
companion CD in the CHAPTERS folder. The naming convention used is 
list####.htm, where # corresponds to each specific chapter and listing 
number. For example, you can find Listing 8-1 in the file named list0801.htm. 

In addition to the chapter listings, the CD contains multimedia files and addi- 
tional files for your review. To see a list and description of these items, please 
see the text file LISTINGS.TXT, located in the CHAPTERS folder. 

You may find it more convenient to copy the CHAPTERS folder to your hard 
drive. To install the files, you can choose the install option from the CD-ROM 
interface. 



What \lou'tt Find 

In addition to HTML files containing the JavaScript chapter listings, the fol- 
lowing development tools are on the companion CD. Many of the tools are 
either trial versions or shareware, which means if you like the product and 
use it regularly, you need to contact the company directly and arrange to 
purchase a copy of your very own. 

Apycom DHTML Menu from Apycom Software, Inc. is a shareware tool you 
can use to create customized DHTML menus — without coding. DHTML 
Menu supports Internet Explorer, Navigator, and other browsers running 
on Windows, Mac, or UNIX. For more details, point your Web browser 

http : //dhtml -menu. com 

BBEdit (Demo). From Bare Bones Software, BBEdit text editor available for 
the Macintosh that makes a great HTML editor, too. Get the skinny on BBEDut 
abd Bare Bones by visiting 



http : //www .barebones. com /products /bbedit/index.shtml 
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Dreamweaver Trial Version. Dreamweaver is an industrial-strength Web 
development tool that runs on both Windows and Power Mac; it also works 
[love with Macromedia's Web-animation development tool, Flash, 
ase a copy of your very own — or just to get more information on 
Dreamweaver — visit 



http : //www .macromedi a.com/software/dreamweaver/ 



Macromedia HomeSite 30-day evaluation version. HomeSite, from 
Macromedia, is an HTML editor for Windows with many features that make 
Web programming a breeze. You can add and check tags, anchors, and for- 
matting quickly. You can find updates at 

http : //www .macromedi a.com/software/homesite 



Paint Shop Pro Evaluation Version. JASC Inc.'s Paint Shop Pro is a share- 
ware graphics viewing and editing tool available for Windows. You can find 
updates at 



http : //www . jasc. com /products/pa i n t s 1 


loppro 




SmartMenus DHTML Menu. From SmartMenus.org comes this fast, stable 
DHTML menu creation tool that's free for use in non-commercial Web sites. 
For conditions of use and sample menus, visit 


http : //www. smartmenus .org/forum/ 







Web Weaver Demo Version. McWeb Software's Web Weaver is a professional 
HTML editor for Windows platforms. The "gold" version offers spell checking 
and a few other features not found in the evaluation version. For details, visit 



http : //www .mcweb software . com/webweav . asp . 



http : //www. mcweb software . com 



If \lou HaUe Probtems (Of the CO Kind) 

I tried my best to find shareware programs that work on most computers 
with the minimum system requirements. Alas, your computer may differ, and 
some programs may not work properly for some reason. 

If you have problems with the shareware on this CD-ROM, the two likeliest 
problems are that you don't have enough memory (RAM) or that you have 
other programs running that are affecting installation or running of a pro- 
gram. If you get an error message such as Not enough memory or Setup 
cannot continue, try one or more of the following suggestions and then try 
using the software again: 
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V Turn off any antivirus software running on your computer. Installation 
programs sometimes mimic virus activity and may make your computer 
rrectly believe that a virus is infecting it. 



e all running programs. The more programs that you have running, 
the less memory is available to other programs. Installation programs 
typically update files and programs. So if you keep other programs run- 
ning, installation may not work properly. 

Have your local computer store add more RAM to your computer. 

This is, admittedly, a drastic and somewhat expensive step. However, 
adding more memory can really help the speed of your computer and 
allow more programs to run at the same time. 



If you still have trouble installing the items from the CD, please call the 
Wiley, Inc. Customer Service phone number at 800-762-2974 (outside the U.S.: 
317-572-3994), visit our Web site at http : / /www . wi ley.com/techsupport. 
Wiley provides technical support only for installation and other general quality- 
control items; for technical support on the applications themselves, consult 
the program's vendor or author. 



To place additional orders or to request information about other Wiley prod- 
ucts, please call 800-225-5945. 
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Index 



Symbols 



+ (addition operator), 51 

&& ("and" logical operator), 51 

<> (angle brackets), 263 

*/ (asterisk, forward slash), 37 

@ (at symbol), 219 

\w+ (backslash, w, plus sign), 219 

0 (call operator) precedence, 51 
A (carat), 219 

, (comma) 

functions, declaring, 42 

precedence order, 51 
?: (conditional operator), 51 
{ } (curly braces), 38 

— (decrement operator), 50 
$ (dollar sign), 219 

. (dot symbol), 219 

==, I = (equality operator), 51 

! (exclamation point), 230 

/ (forward slash), 219 

/* (forward slash, asterisk), 37 

> (greater than sign), 263 

++ (increment operator), 50 

< (less than sign), 263 

% (modulus operator), 50 

- (negation operator), 51 

1 I ("or" logical operator), 51 
; (semicolon) 

expression, checking, 39 
precedence order, 51 
[] (square brackets), 38 
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About Focus on JavaScript Web page, 257 
accessing 

browser, 12 

cookies, 133-134 

CSS objects with JavaScript, 86 

Java class (netscape), 316 

multiple Java classes (packages), 317 



sun . * package, 323 

top-level Java class (j a va), 312 
addition operator (+), 51 
address input, validating, 216, 217-220 
address, Web 

accuracy of listed, 3 

currently loaded (1 ocati on), 314 

link opened in frame, viewing, 143 

visited (hi story), 312 
advertisement, pop-up 

alert, creating, 79 

error messages, 230 

event handlers, 243-244 

software barring, 147, 247 
alert window, creating, 79 
Allen, Dan (DOM Tooltip creator), 211 
AllWebMenus (Likno Software) 

site map tool, 200 
America Online browser, 16, 271 
anchor hyperlink target, 304 
anchor TARGET attribute, 153 
"and" logical operator (&&), 51 
angle brackets (<>), 263 
animation 

described, 19, 157-161 

hotspots, 168 

navigation bars, 168 

rollovers, 168-171 

slideshow series of images, 165-168 
support, 17 

turning images on and off, 161-164 
appearance 

Web page, 17 

Web site, 18 
applet 

described, 157 

DOM reference (applet), 304 
application 
attaching script to HTML file, 30-32 
described, 23 
HTML file, creating, 25-28 
requirements, determining, 24 
script, creating, 29 
testing script, 32-33 
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Apycom Software DHTML Menu 
back-of-the-book CD, 338 

U TO D&QOKS 283 

iarea TARGET attribute, 153 
argument, string 
floating point number, parsing and 
returning (pa rseFl oat ( )), 326 
specified radix or base (parselnt( )), 
parsing and returning, 327 
arguments 
DOM, 305 

function, declaring, 42 
array, 305 
array data, 99 

ASCII string, returning for specified hexa- 
decimal encoding (unescape ( )), 328 
assignment operators 

described, 52 

precedence, 51 
asterisk, forward slash (*/), 37 
at symbol (@), 219 
attributes 

JavaScript cookies, 132, 133 

properties versus, 76 
automatic events, 18, 80 

•B • 

backslash, w, plus sign (\w+), 219 
Baroudi, Carol (Internet For Dummies), 258 
BBEdit (Bare Bones Software), 338 
behaviors. See methods, DOM 
binary and unary operators, 50 
_bl ank attribute, 153 
blinking text, 80 
blocking 
frames, 154 

pop-up advertisements, 147, 247 
blocks, creating exceptions with, 250-252 
blur-related event handlers 

focus, changing, 240, 243 

user input, capturing, 220, 221 
boolean value 

described, 99 

DOM, 306 

Not a Number, judging entry 

(i sNAN ( )), 222 



border, image, 77 

browser. See also frame; window 

accessing, 12 

configuration details 

(cl i entl nf ormati on), 307 
configuration (navi gator), 315-316 
crashing, 283 

incompatibility errors, common, 
270-271 

JavaScript support, 13, 16 

object defined by, 75, 96 

problems, debugging, 281 

running, determining, 38 

support, DOM, 303-304 

tooltip formatting incompatibility, 201 

window or frame (wi ndow), 324 
browser-detection script 

described, 59-64 

ECMAScript standard, 105-106 

embedded objects, 112-121 

make and version, 106-112 

user preferences, 122-123 

Web page referrer page, loading, 121 
bugs. See errors, debugging 
button 

blurring, 240, 245 

clicking, 241 

HTML form, 79, 306, 318-319 
HTML sample error, 262 
mouse, releasing, 244 
onCl i ck event handler, 11, 18 
tags, 14 

text, manipulating, 90-93 

•C« 

calculation bug, 282 
call operator (()) precedence, 51 
calling functions 
described, 43 

swapping images on rollover (swa p ( )), 
176-177 
calling validation script, 221 
carat ( A ), 219 

Cascading Style Sheets. See CSS 
case-sensitivity, JavaScript, 262 
catch block, 250-252, 284-287 
categories, DOM (Document Object Model), 
75-77 



Index 



CD, back-of-the-book 



Drop 



book chapter files, 338 
" ^7-338 



J]|iJ|V!J\^cflVwiows, 336-337 
problems, handling, 340 
system requirements, 336 
CDR Site Map Pro 2.1 tool, 200 
CGI (Common Gateway Interface) 
described, 125-126 
input-validation, 216 
path, 132 
characters 
quote-delimited set of (string), 321 
validating input, 219 
check box in HTML form 
blurring, 240 
changing, 241, 245 
DOM, 306-307 
checking 
data levels, 222 
design, 223 

existence, testing, 224-225 
feedback etiquette, 230 
full form, 228, 230-231 
implementing, 231-238 
numbers, checking parameters, 82-84 
numeric value, testing, 225-227 
pattern-matching, alternative to, 228-229 
patterns, testing, 227-228 
regular expressions with, 216, 219 
class 

accessing (netscape), 316 
(JavaCl ass) DOM, 313 
packages, accessing, 317 
top-level object accessing (java), 312 
client. See also frame; window 
accessing, 12 
configuration details 

(cl i entl nf ormati on), 307 
configuration (navigator), 315-316 
crashing, 283 

incompatibility errors, common, 270-271 

JavaScript support, 13, 16 

object defined by, 75, 96 

problems, debugging, 281 

running, determining, 38 

support, DOM, 303-304 

tooltip formatting incompatibility, 201 

window or frame (wi ndow), 324 



closing new windows, 144-147 
CNET Builder Web site, 256 
code conventions in text, 3 
collection of objects, 305 
color 

background and text, user's choice of, 123 

JavaScript values, 297-302 
comma (,) 

functions, declaring, 42 

precedence order, 51 
comments 

conditionals, 37 

described, 36 

errors, debugging, 275, 276 

expression, checking for different values 

(switch statement), 39-41 
hiding, 31 

JavaScript language, 36-41 
lines, identifying, 29 
multiple-line, 37 
single-line, 36 

testing condition (i f-el se conditional), 
37-39 

Common Gateway Interface. See CGI 

comparison operators, 53 

compiled language, 13 

com p. 1 ang . javascript newsgroup, 259 

condition 

execution at proper (while loop), 47-48 
for loop, 44 

one execution repeated when required 
(do-whi 1 e loop), 48 
conditional operator (?:), 51 
conditionals 

comments, 37 

defined, 36 
content, quick guide to. See site map 
converting 

object to number (Number( )), 326 

value to decimal number 
(parseFl oat( )), 222 
cookie 

accessing, 133-134 

benefits of using, 126-127 

content, displaying, 134-142 

deleting by expiring, 132, 136, 142 

described, 125-126 

file, viewing, 130-131 

security issues, 126-127 



JavaScript For Dummies, 4th Edition 



131-133 
g, 128-129 



cookie (continued) 
sett ing (creating), 

i^. P /*^'/ i S n |^ 

view from user's perspective, 127-131 
cross-platform features, 61 
cryptography-related digital signature 

method (crypto), 307 
CSS (Cascading Style Sheets) 

accessing with JavaScript, 86 

benefits of using, 84-85 

defining, 85-86 

JavaScript, 17 

menu class, 185, 195 

sliding menus, 189 

tooltip style, defining, 205-206 

use with DHTML, 9 
curly braces ({ }), 38 
CVS version control tool, 276 

•/> • 

Danere StyleMaker, 339 
data 

frames, sharing between, 152-154 

JavaScript types, 98-100 

levels, order form validation script, 222 

script gathering, 68-71 
data, accessible. See DOM 
data validation 

defined, 215 

regular expressions with, 216 
date and time values (Date object) 

cookie expiration, 136 

described, 99 

DOM, 308 
date-and-time stamp application 

HTML code, 26-27 

JavaScript code, 29 

script, attaching to HTML file, 30-32 
date-formatting script, 64-68 
debugging 

browser, 281 

checking, 282 

comments and, 275 

described, 273 

documentation, consulting, 276 



exception handling, 283-287 
Internet Explorer tool, 287, 290-291 
isolating, 275-276 
Navigator tool, 287-290 
newsgroups, consulting, 282-283 
process of elimination, 280-282 
pseudocode, clarifying requirements 

with, 274 
statements, breaking into smaller 

functions, 279-280 
trial-and-error approach, 283 
variable values, displaying, 276-279 

decimal 
parsing string and returning 

(parseFl oat( )), 326 
turning value into (parseFl oat( )), 222 

declaring functions, 42 

decrement operator ( — ), 50 

deleting cookies by expiring, 132, 136, 142 

design 

HTML map active areas, 204-205 

order form validation script, 223 

site map, 191-192 

Web page, 17-18 
Designing CSS Web Pages (Schmitt), 205 
detection, browser 

described, 59-64 

ECMAScript standard, 105-106 

embedded objects, 112-121 

make and version, 106-112 

user preferences, 122-123 

Web page referrer page, loading, 121 
development cycle, 24 
DHTML (Dynamic HTML) 

evolution of, 9 

menus, 181 

page appearance, changing on fly, 93-96 
positioning text dynamically, 90-93 
text, adding dynamically, 86-90 
tooltips, 201 
using, 17 

DHTML Menu tool (Apycom Software), 
190, 338 

DHTML Menu tool (Milonic Solutions), 190 
DHTML Menu tool (SmartMenus), 190, 339 
DHTML Tooltips tool (Zorn, Walter), 211 
digital signatures, 307 



Index 




gging, 281-282 



display 
cookies, 134-142 

pull-down menu, 195 
screen properties and colors 

(screen), 320 
sliding menu screen properties, 189 
Document Object Model. See DOM 
document unloading, 242, 243 
documentation 
browser, checking, 270 
errors, debugging, 276 
JavaScript, 21 
dollar sign ($), 219 
DOM (Document Object Model) 
accessing class (netscape), 316 
arguments, 305 
array (JavaArray), 313 
boolean (true/false) value, 306 
browser configuration details 
(cl i entl nf ormati on), 307 
browser configuration (navi gator), 

315-316 
browser support, 96, 303-304 
categories, 75-77 
check box in HTML form, 306-307 
class (JavaCl ass), 313 
class, top-level object accessing 

(Java), 312 
classes, accessing (packages), 317 
code chunk (f uncti on), 311 
collection of objects (array), 305 
date and time values (Date object), 308 
described, 15, 73 

digital signatures, cryptography-related 

methods (crypto), 307 
display screen properties and colors 

(screen), 320 
dynamic objects, 84-86 
ease of use of, 1 1 
ECMA standard and, 106 
event handlers, 81-82 
event, predefined, 309-310 
file upload element, HTML form 

(fileUpload), 310 
form elements in HTML document 

(elements[j), 309 



functions, 82-84 

functions, built-in, 325-328 

global properties, 325 

hidden HTML form field (hi dden), 311 

HTML display frame, 311 

HTML document (document), 308-309 

HTML form, 310 

HTML select list option, 317 

hyperlink target (anchor), 304 

hypertext link (1 i nk), 314 

image in HTML document, 312 

image map, definition of (area), 305 

Internet Explorer, 100-101 

Java applet reference (applet), 304 

Java object (JavaObject), 313 

mathematical constants and functions 

(math), 314-315 
methods, 79-81 

MIME type, browser-supported 

(mimeType), 315 
Netscape Navigator, 96-100 
object models, 74-75 
object type, 316-317 
package (JavaPackage), 313-314 
password in HTML form, 318 
pattern of regular expression 

(RegExp), 319 
plug-in application, Navigator 

(pi ugi ns), 318 
primitive numeric values (number), 316 
properties, 77-79 
push button in HTML form, 306 
quote-delimited characters, set of 

(string), 321 
radio button, HTML form, 318-319 
Reset button, HTML form, 320 
style of HTML elements, 321-322 
Submit button, HTML form, 322 
sun . * package, accessing, 323 
text area element (multiline text input 

element), HTML form, 323 
text field, HTML form, 323 
URL, currently loaded (1 ocati on), 314 
URL, visited (hi story), 312 
window or frame (wi ndow), 324 
DOM (Document Object Model) Tooltip tool 

(Allen, Dan), 211 
dot symbol (.), 219 
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Dreamweaver (Macromedia), 339 
dumping property values, 47 
"TnVokL HjM^QSfcDHTML 

iTlIffc'ftftiDefinitive Reference 
(Goodman), 181 
dynamic objects, DOM (Document 
Object Model), 84-86 




EarthWeb online resource, 257 
ease of use of JavaScript, 1 1-12 
ECMA (European Computer Manufacturers 
Association) script standard 

browser, detecting user's, 105-106 

described, 60 
effects 

described, 19, 157-161 

hotspots, 168 

JavaScript sample, 9 

navigation bars, 168 

rollovers, 168, 169-171 

slideshow series of images, 165-168 

source code, viewing, 1 1 

support, 17 

turning images on and off, 161-164 
either-or option, validating entry, 228, 230 
elements, style, 321-322 
e-mail address input, validating, 

216, 217-220 
embedded objects, 112-121 
embedding JavaScript code in HTML file, 

14-15 
end of pattern, 219 
endless or infinite loop, 45 
equality operator (==, I =), 51 
error handling 

described, 250-252 

errors, debugging, 283-287 
error message, end-of-form, 221 
errors, common 

angle brackets, 263 

browser incompatibility, 270-271 

HTML, 262, 281-282 

in logic, 269-270 

nested quotes, misplaced, 266 

numbers, treating as strings, 267-268 

operators, 54 

parentheses, missing, 264 



quotes, missing, 265 

scripting statements, misplaced, 265-266 
strings, treating as numbers, 268-269 
system-generated, 249-250 
tags, missing, 263-264 
typographical, 262 
errors, debugging 
browser, 281 
checking, 282 
comments and, 275 
described, 273 

documentation, consulting, 276 
exception handling, 283-287 
Internet Explorer tool, 287, 290-291 
isolating, 275-276 
Navigator tool, 287-290 
newsgroups, consulting, 282-283 
process of elimination, 280-282 
pseudocode, clarifying requirements 

with, 274 
statements, breaking into smaller 

functions, 279-280 
trial-and-error approach, 283 
variable values, displaying, 276-279 
European Computer Manufacturers 

Association (ECMA) script standard 
browser, detecting user's, 105-106 
described, 60 
event 
bug tied to, 282 
described, 239-240 
form, 245-246 
keyboard, 247 
mouse, 244 

Navigator and Internet Explorer 

support, 243 
predefined, DOM, 309-310 
window, 243-244, 247 
event handler 
button pressing (on Click), 11 
described, 75, 240 
DOM, 81-82 
listed, 240-242 

pop-up advertisement, 243-244 

sliding menus, 190 
exception handling 

described, 250-252 

errors, debugging, 283-287 
exclamation point (!), 230 
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vllidaiipn script, 224-225 



existence, testing 
described, 217 
i (jej^^ru^^^l^^)] 

checking for different values 
(switch statement), 39-41 
function, embedding, 43 
JavaScript language, 58-59 



falls through, interpreter, 41 
feedback 
HTML form, 215 

order form validation script, 230 
fields, validating independent, 222 
file 

cookie, viewing, 130-131 

external JavaScript, including, 15 

local, problem loading, 281 

upload element, HTML form 
(fileUpload), 240, 310 
file, HTML (HyperText Markup Language) 

creating, 25-28 

script, attaching to, 30-32 
file transfer protocol (FTP), 16 
filename 

image, 77 

on/off image files, 174 
finite number, evaluating argument for 

(isFiniteO), 326 
Flash animation plug-in, 157 
floating-point number 
parsing string and returning 

(parseFl oat( )), 326 
turning value into (parseFloatO), 222 
form 

bug prior to submitting, 282 
dependent fields, validating, 222 
elements in HTML document 

(elements!!]), 309 
events, 245-246 
push button, 306 
radio button, 318-319 
Reset button, 320 
selection list (sel ect), 320-321 
submitting, 242, 322 
tags, 14 

TARGET attribute, 153 



text field, 323 

user input, capturing, 215-221 
form validation 
data levels, 222 
design, 223 

existence, testing, 224-225 

feedback etiquette, 230 

full form, 228, 230-231 

implementing, 231-238 

numbers, checking parameters, 82-84 

numeric value, testing, 225-227 

pattern-matching, alternative to, 228-229 

patterns, testing, 227-228 

regular expressions with, 216, 219 

forward slash (J), 219 

forward slash, asterisk (/*), 37 

frame 

adding to pull-down menu, site maps, 
196-197 

animation placeholder, 164 

blocking, 154 

creating, 149-151 

data, sharing between, 152-154 

described, 148-149 

event handler, 240, 243 

input focus, 80 

resizing or moving, 242, 243 

target attribute, 153 

targeted hyperlinks, adding, 197-199 
FTP (file transfer protocol), 16 
full form, validating, 228, 230-231 
fully qualified name, object, 97 
fully qualified object property, 78 
functions 

calling, 43 

declaring, 42 

defined, 36, 42 

DOM, 82-84 

execution at proper condition 

(while loop), 47-48 
execution once then at proper condition 

(do-whi 1 e loop), 48 
iterating through all object properties 

(f or - i n loop), 46-47 
loop behavior, changing (continue and 

break statements), 49-50 
loops, 44 

stepping through multiple items 

(for loop), 44-45 
value, returning from, 43 
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functions, built-in 
adding tainting to data element or script 



VSy l > sftfnjl pj^u^jng for specified hexa- 
decimal encoding (unescape( )), 328 
converting object to number 

(Number( )), 326 
DOM, 325-328 

finite number, evaluating argument for 

(isFiniteO), 326 
floating point number, parsing string and 

returning (parseFl oat( )), 326 
hexadecimal encoding of argument, 

returning (e s c a p e ( ) ), 325 
removing tainting from data element or 

script (untaintC )), 328 
specified radix or base, parsing string 

and returning (parselnt( )), 327 
string, evaluating without reference to 

particular object (eva 1 ( )), 325 



GIF (graphics interchange format), 

animated, 158 
global properties, DOM (Document 

Object Model), 325 
Goodman, Danny (Dynamic HTML: 

The Definitive Reference), 181 
graphics. See images 
graphics interchange format (GIF), 

animated, 158 
greater than sign (>), 263 
greeting, custom, 140-142 



handler, event 
button pressing (onCl i ck), 11 
described, 75, 240 
DOM, 81-82 
listed, 240-242 

pop-up advertisement, 243-244 

sliding menus, 190 
handler, exception 

described, 250-252 

errors, debugging, 283-287 
hardware, 1-2, 19, 336 
height, image, 77 



help, pop-up 
adding to Web page (<IMG> tag), 159 
defining style for tooltip, 205-206 
described, 18 
DHTML tags, 201 
HTML, 202-203 

HTML map, designating active areas, 
204-205 

JavaScript functions to display and hide, 
206-207 

mouse pointer, custom functions 
responding to, 207-208 

simple, creating, 209-211 

third-party scripts, 211 
hexadecimal characters, 330-334 
hexadecimal encoding of argument, 

returning (escape( )), 325 
hidden elements 

comments, 31 

form field (hi dden), 311 
hierarchy, top-level window, 153 
HomeSite (Macromedia), 339 
hotspots 

animation, 168 

image, carving into multiple, 177-180 
HTML 4 For Dummies (Tittel and Pitts), 1 1 
HTML (HyperText Markup Language). 
See also frame 

bugs, tracking, 281-282 

creating in word processor, 25 

display frame, 311 

document (document), 308-309 

errors, common, 262 

file, 25-28, 30-32 

form, 215-216, 310 

hyperlinks, adding (<A> tag), 197-198 

JavaScript and, 14-15, 17 

knowledge required, 1 1 

map, designating active areas, 204-205 

MARQUEE tag, 106-107 

newsgroup, 259 

objects, defined, 75 

select list option, 317 

site map layers, associating 

(< S PAN > tags), 196 
style, associating, 85 
tags, missing, 263-264 
tooltips, formatting (<AREA> tag), 

201, 202-203 



Index 




HTML (HyperText Markup Language) form 
bug prior to submitting, 282 

ilidating, 222 
ocument 
(elements [])7309 
events, 245-246 
push button, 306 
radio button, 318-319 
Reset button, 320 
selection list (sel ect), 320-321 
submitting, 242, 322 
tags, 14 

TARGET attribute, 153 
text field, 323 

user input, capturing, 215-221 
HTML (HyperText Markup Language) 
form validation 
data levels, 222 
design, 223 

existence, testing, 224-225 

feedback etiquette, 230 

full form, 228, 230-231 

implementing, 231-238 

numbers, checking parameters, 82-84 

numeric value, testing, 225-227 

pattern-matching, alternative to, 228-229 

patterns, testing, 227-228 

regular expressions with, 216, 219 
hyperlink target (anchor), 304 
hyperlinks 

data between frames, 152-154 

to hotspot, 180 
hyperlinks, group of. See navigation bars 
hyperlinks, organized list of. See site map 
hypertext link, 314 



i f -el se tooltip statement, 206-207 
image map, 305 

images. See also swapping images on 
rollover 

adding to Web page (<IMG> tag), 158-159 
carving into multiple hotspots, 177-180 
in HTML document, 312 
interrupting loading (on Abort), 240 
mouse-related event handlers, 244 
properties associated with, 77-78 



rollover, 169-171 
tags, 14 
tooltip, 203 

turning on and off (setTimeout( )), 
161-164 

implementing order form validation script, 

231-238 
in scope variable, 57 
increased power, 9-10 
increment operator (++), 50 
index 

content headings, linking, 152 

frames, displaying with, 149, 150 
information 

browser, checking, 270 

errors, debugging, 276 

JavaScript, 21 
initial expression, 44 
initializing variables, 56 
input form 

bug prior to submitting, 282 

dependent fields, validating, 222 

elements in HTML document 
(elements!!]), 309 

events, 245-246 

push button, 306 

radio button, 318-319 

Reset button, 320 

selection list (sel ect), 320-321 

submitting, 242, 322 

tags, 14 

TARGET attribute, 153 
text field, 323 

user input, capturing, 215-221 
input, user. See HTML form 
input validation 

data levels, 222 

design, 223 

existence, testing, 224-225 
feedback etiquette, 230 
full form, 228, 230-231 
implementing, 231-238 
numbers, checking parameters, 82-84 
numeric value, testing, 225-227 
pattern-matching, alternative to, 228-229 
patterns, testing, 227-228 
regular expressions with, 216, 219 
instance, 54 
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integer, turning value into 
(parselntO), 222 
^ejas^e^imlo^s-^ee animation; 

Internet Explorer (Microsoft) 
browser-detection script, 62 
cookie support, configuring, 129 
cookies, storing, 131 
debugging tool, 287, 290-291 
documentation and technical support, 21 
DOM, 100-101 

effect source code, viewing, 1 1 
event properties, 310 
events support, 243 
exception handling, 287 
HTML tooltip formatting, 201 
JavaScript support through JScript, 

12, 33, 60 
JScript documentation, 270, 276 
software, 20 

status bar, viewing, 177-178 
version-specific JavaScript code, 28 
writing site to meet needs of, 61 

The Internet For Dummies (Levine, Baroudi, 
and Young), 258 

Internet hardware, 19 

Internet Related Technologies JavaScript 
resource, 257 

interpreted language, 13 

interrupting loading 
of images, 240 
of windows, 80 

intranet application, 61 

IRT (Internet Related Technologies) 
JavaScript resource, 257 

isolating errors, 275-276 



JASC Inc. Paint Shop Pro, 339 
Java 

array (JavaArray), 313 
JavaScript versus, 12 
object (JavaObject), 313 
package (JavaPackage), 313-314 
Java applet 
described, 157 

DOM reference (appl et), 304 



Java class 

accessing (netscape), 316 

(JavaClass)DOM,313 

packages, accessing, 317 

top-level object accessing (Java), 312 
JavaScript 

animated effects, 19 

bugs, checking, 282 

code chunk (f uncti on), 311 

color values, 297-302 

customize Web site appearance, 18 

data types, 98-100 

documentation and technical support, 21 

ease of use of, 11-12 

functions to display and hide, tooltips, 

206-207 
hardware needed, 19 
HTML and, 14-15 
with HTML and CSS, 17 
increased power, 9-10 
name change, 12 
reserved words, 295-296 
sample effects, 9 
as scripting language, 10-11 
security, 16 
software needed, 20 
speed, 13 

Web browser support, 13, 16 

Web site navigation, 18 
JavaScript application 

attaching script to HTML file, 30-32 

described, 23 

HTML file, creating, 25-28 

requirements, determining, 24 

script, creating, 29 

testing script, 32-33 
JavaScript language 

browser-detection script, 59-64 

commenting, 36-41 

data-gathering script, 68-71 

date-formatting script, 64-68 

expressions, 58-59 

functions, 42-50 

literals, 58 

operators, 50-56 

statements, 58-59 

syntax, 35-36 

variables, 56-57 
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JScript 
debugger, 287 




technical support, 



21,270,276 
newsgroup, 259 

keyboard events, 241, 246, 247 



language, JavaScript 

browser-detection script, 59-64 

commenting, 36-41 

data-gathering script, 68-71 

date-formatting script, 64-68 

expressions, 58-59 

functions, 42-50 

literals, 58 

operators, 50-56 

statements, 58-59 

syntax, 35-36 

variables, 56-57 
layers, HTML (HyperText Markup 
Language) 

defined, 185-186 

site map, associating (<SPAN> tags), 196 
1 eft window position, controlling, 148 
legal expression, 57 
less than sign (<), 263 
letters, validating input, 219 
Levine, John R. (Internet For Dummies), 258 
Likno Software AllWebMenus site map 

tool, 200 
links 

data between frames, 152-154 

to hotspot, 180 
links, group of. See navigation bars 
links, organized list of. See site map 
literals, 58 
LiveScript, 12 
loading image, 77, 241, 243 
1 ocateImage( ) function, 176 
logical errors, 269-270 



logical operators 

described, 53 

precedence, 51 
loops 

behavior, changing (continue and 

break statements), 49-50 
defined, 36 
functions, 44 
lowercase letters, 333-334 



• M • 



Macintosh system requirements, 2, 19 
Macromedia Dreamweaver, 339 
Macromedia HomeSite, 339 
make, browser detection of, 106-112 
maps, Web site 

described, 191-192 

frames, adding to pull-down menu, 
196-197 

pull-down menu, 193-196 

targeted hyperlinks, adding, 197-199 

third-party tools, 199-200 
massaging input data, 230 
Math object, 100 
mathematics. See also numbers 

constants and functions (math), 314-315 

operator precedence, 51 
McWeb Software Web Weaver, 339 
menus 

DHTML, 181 

pull-down, 182-186, 193-196 

sliding, 186-190 

third-party components, 190 
message, status bar, 179-180 
methods, DOM (Document Object Model), 

74, 79-81 
Microsoft Internet Explorer 

browser-detection script, 62 

cookie support, configuring, 129 

cookies, storing, 131 

debugging tool, 287, 290-291 

documentation and technical support, 21 

DOM, 100-101 

effect source code, viewing, 1 1 
event properties, 310 
events support, 243 
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Microsoft Internet Explorer (continued) 
exc eption handling, 287 
pTV^^j^Jfarmatting, 201 
la^ lciilt lirAjoTnthrough JScript, 

12, 33, 60 
JScript documentation, 270, 276 
software, 20 

status bar, viewing, 177-178 

version-specific JavaScript code, 28 

writing site to meet needs of, 61 
Microsoft online resources, 256 
Microsoft public scripting newsgroup, 259 
Microsoft Windows XT, 2 
Milonic Solutions DHTML Menu, 190 
MIME type, browser-supported 

(mimeType), 315 
mistakes, common 

angle brackets, 263 

browser incompatibility, 270-271 

HTML, 262, 281-282 

in logic, 269-270 

nested quotes, misplaced, 266 

numbers, treating as strings, 267-268 

operators, 54 

parentheses, missing, 264 

quotes, missing, 265 

scripting statements, misplaced, 265-266 

strings, treating as numbers, 268-269 

system-generated, 249-250 

tags, missing, 263-264 

typographical, 262 
modifying input data, 230 
modulus operator (%), 50 
month, matching, 40 
mouse 

events, 242, 244 

onCl i ck event, showing, 185, 245-246 
pointer, tooltips responding to, 207-208 
sliding menus, 190 
mouse rollover, 168, 169-171 
moving element with mouse, 244 
multiple items, functions stepping through 

(for loop), 44-45 
multiple windows, creating, 147-148 
multiple-line comments, 37 



•N • 

name 
image, 77 

on/off image files, 174 
name change, JavaScript, 12 
navigation bars 

animation, 168, 171-177 

described, 18, 168, 171 

preloading images, 172-174 

single image, carving into multiple 
hotspots, 177-180 

swapping images on rollover, 174-177 
Navigator (Netscape) 

browser-detection script, 62 

cookie support, configuring, 128-129 

debugging tool, 287-290 

document model reference, 209 

documentation, 21, 270 

DOM, 96-100 

effect source code, viewing, 11 

event properties, 309 

event support, 243 

exception handling, 252, 287 

HTML tooltip formatting, 201 

JavaScript support, turning on, 33 

objects, listed, 97-98 

software, 20 

technical support, 21 

version-specific JavaScript code, 28 
negation operator (-), 51 
nested quotes, misplaced, 266 
NetMechanic online browser detection 

service, 271 
NetObjects ScriptBuilder, 339 
Netscape DevEdge Web site, 256 
Netscape, ECMA standard, 60 
Netscape Navigator. See Navigator 

(Netscape) 
new operator, 54-56, 75 
newsgroups 

errors, consulting about, 282-283 

online resources, 258-259 
Not a Number, judging entry (i sNAN ( )), 222 
Notepad text editor, 25, 26 
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null data, 99 
numbers 




parameters, checking, 82-84 
treating as strings, common error 

related to, 267-268 
user input, identifying, 222 
validating, 219, 223 
value, testing in order form validation 

script, 217, 225-227 

•O* 

object models, 74-75 

object properties, iterating through all 

(f or - i n loop), 46-47 
object type, 316-317 
octal character representation, 330-334 
on and off, turning images 

animation, 161-164 

rollover, 169-171 
online resources 

About Focus on JavaScript Web page, 257 

CNET Builder, 256 

EarthWeb, 257 

HTML and CSS, 186 

IRT (Internet Related Technologies) 
JavaScript section, 257 

Microsoft, 256 

Netscape DevEdge site, 256 

newsgroups, 258-259 

Project Cool's JavaScript QuickStarts, 256 

ScriptSearch, 258 

Webmonkey, 256 

WebReference, 258 
OpenCube Visual QuickMenu Pro, 190 
opening new windows, 144-147 
Opera browser, 16, 211 
operators 

assignment, 52 

binary and unary, 50 

common confusion, 54 

comparison, 53 



defined, 36 
listed, 50-51 
logical, 53 

new and this, 54-56 

precedence, 51-52 
"or" logical operator (I I), 51 
or option, validating entry, 228, 230 
order form validation script 

data levels, 222 

design, 223 

existence, testing, 224-225 

feedback etiquette, 230 

full form, 228, 230-231 

implementing, 231-238 

numeric value, testing, 225-227 

pattern-matching, alternative to, 228-229 

patterns, testing, 227-228 

• P • 

page 

appearance, changing on fly, 93-96 
appearance, customizing, 17 
interactive, creating, 10 
referrer page, loading, 121 
tags, 14 

page layout, controlling display. See CSS 
Paint Shop Pro (JASC Inc.), 339 
paragraphs, allowing users to display 

or hide, 86-88 
parameters, 79 
_parent attribute, 153 
parentheses, missing, 264 
password 

clicking, 241 

in HTML form, 318 
pattern 

matching, alternative to, 228-229 

of regular expression (Reg Exp), 319 

testing, 227-228 

validating, 217, 219, 223 
p i variable, 58 
pictures. See images 
Pitts, Natanya (HTML 4 For Dummies), 11 
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placeholder frame, animation, 164 
plug-in 

^l^^igr 1 ■ aviator (p i 1 1 q i n s ). 318 

support, 15 
pop-up help 
adding to Web page (<IMG> tag), 159 
defining style for tooltip, 205-206 
described, 18 
DHTML tags, 201 
HTML, 202-203 

HTML map, designating active areas, 
204-205 

JavaScript functions to display and hide, 
206-207 

mouse pointer, custom functions 
responding to, 207-208 

simple, creating, 209-211 

third-party scripts, 211 
pop-up window 

alert, creating, 79 

error messages, 230 

event handlers, 243-244 

software barring, 147, 247 
posts, adapting previous, 283 
precedence, operator, 51-52 
pre-form-submittal bug, 282 
preloading navigation bar images, 

171, 172-174 
price, calculating, 274 
primitive numeric values (number), 316 
problems, common 

angle brackets, 263 

browser incompatibility, 270-271 

HTML, 262, 281-282 

in logic, 269-270 

nested quotes, misplaced, 266 

numbers, treating as strings, 267-268 

operators, 54 

parentheses, missing, 264 

quotes, missing, 265 

scripting statements, misplaced, 265-266 
strings, treating as numbers, 268-269 
system-generated, 249-250 
tags, missing, 263-264 
typographical, 262 
problems, debugging 
browser, 281 
checking, 282 



comments and, 275 
described, 273 

documentation, consulting, 276 
exception handling, 283-287 
Internet Explorer tool, 287, 290-291 
isolating, 275-276 
Navigator tool, 287-290 
newsgroups, consulting, 282-283 
process of elimination, 280-282 
pseudocode, clarifying requirements 

with, 274 
statements, breaking into smaller 

functions, 279-280 
trial-and-error approach, 283 
variable values, displaying, 276-279 
process of elimination error debugging, 

280-282 

Project Cool's JavaScript QuickStarts 

online resource, 256 
properties 

attributes versus, 76 

displaying, 47 

DOM, 74, 77-79 

iterating through all (f or - i n loop), 46-47 
pseudocode, 274 
pull-down menu 

described, 182-186 

site maps, 193-196 
push button, 306 



Q 



quote-delimited characters, set of 

(string), 321 
quotes, missing, 265 



radio button, HTML form, 318-319 
radix or base string argument, 
(parselnt( )), parsing and 
returning, 327 
registration, visitor, 134-142 
regular expressions, data validation with 

symbols, listed, 219 

user input, capturing, 216 
relational operator precedence, 51 
reserved words, 295-296 
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Reset button, HTML form 
DOM, 320 

l^niJaao41el,^46«247 




rollover. See mouse rollover 
rubber-stamping multiple windows, 147-148 
runtime errors 
debugging, 283-287 
described, 249-252 
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Schmitt, Christopher (Designing CSS 

Web Pages), 205 
ScriptBuilder (NetObjects), 339 
scripting 

language, JavaScript as, 10-11 

statements, misplaced, 265-266 
ScriptSearch online resource, 258 
scrubbing, data. See data validation 
security issues 

cookies, 126-127, 132 

JavaScript, 16 
selection list, form (sel ect), 320-321 
_self attribute, 153 
semicolon (;) 

expression, checking, 39 

precedence order, 51 
server 

accessing, 12 

processing on, 17 
setting cookies, 131-133 
single image, carving into multiple 

hotspots, 177-180 
single-line comments, 36 
site 

appearance, customizing, 18 
navigation, 18 
site map 
described, 191-192 

frames, adding to pull-down menu, 196-197 

pull-down menu, 193-196 

targeted hyperlinks, adding, 197-199 

third-party tools, 199-200 
Site Map Pro 2.1 (CDR) tool, 200 
SiteXpert 7 (Xtreeme) site map tool, 200 
slideshow series of images, 165-168 
sliding menus, 186-190 



SmartMenus DHTML menu, 190, 339 
sniffer script, 107-112 
software. See also application 

errors, debugging, 287-291 

Internet Explorer, 20 

JavaScript-specific, 20 

necessary, 20 

Netscape Navigator, 20 

site map tools, 199-200 

tooltip scripts, 211 
source code, viewing, 1 1 
special characters, 329-334 
special effects 

described, 19, 157-161 

hotspots, 168 

JavaScript sample, 9 

navigation bars, 168 

rollovers, 168, 169-171 

slideshow series of images, 165-168 

source code, viewing, 1 1 

support, 17 

turning images on and off, 161-164 
speed, JavaScript, 13 
spelling, JavaScript precision, 262 
square brackets ([]), 38 
stateless nature of Web, 125 
statements 

breaking into smaller functions, 
debugging, 279-280 

JavaScript language, 58-59 

lines, identifying, 29 

scripting, misplaced, 265-266 
status bar 

hotspots, viewing, 177-178 

message, displaying custom, 179-180 
stepping through multiple item (for loop), 

44-45 
stopping 

image loading, 240 

window loading, 80 
string 

data type supported, 99 

evaluating without reference to particular 

object (eval ( )), 325 
exception handling, 287 
treating as numbers errors, common, 

268-269 
validating, 219, 228-229 
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string argument 
floating point number, parsing and 
Mtufiuaf Ijw F 1 oat( )), 326 

^t|^^ase (parselnt( )), 
parsing and returning, 327 
style, 321-322. See also CSS 
StyleMaker (Danere), 339 
Submit button, HTML form, 322 
sun . * package, accessing, 323 
support 
animation, 17 

cookie, configuring, 128-129 

DOM, 303-304 

event, 243 

JavaScript, 13, 16 

plug-in, 15 
surfing sites, 130 
swapping images on rollover 

calling swap( ) function, 176-177 

described, 18, 174-175 

locatelmageO function, 176 

swap( ) function, 175 
syntax 

book's, importance of following exactly, 3 
JavaScript language, 35-36 
typographical errors, common, 262 



table of contents 

framed, sample, 150, 151 

index, linking, 152 
tags, missing, 263-264 
tainting 

adding to data element or script 
(taintO), 327 

removing from data element or script 
(untaintC )), 328 
TARGET attribute, frames, 152-153 
target platforms, 59 
targeted hyperlinks, adding, 197-199 
technical support, 21 
telephone number, validating, 227-228 
testing 

condition (i f -el se conditional), 37-39 
importance of, 13 



multiple browsers, 271 
script, 32-33 
text 

appearance, controlling with CSS, 85 

dynamically adding, DHTML script, 86-90 

image alternative, 159 

sample application, 27 
text area, 323 
text editor, 25 
text field, 323 
third-party products 

DHTML menu components, 190 

site maps, 199-200 

tooltip scripts, 211 
this operator, 54-56 
throw block, 250-252, 285-286 
time stamp application 

HTML code, 26-27 

JavaScript code, 29 

script, attaching to HTML file, 30-32 
time values (Date object) 

cookie expiration, 136 

described, 99 

DOM, 308 
title 

image, 160 

text, 27 

Tittel, Ed (HTML 4 For Dummies), 1 1 
tooltips 

adding to Web page (<IMG> tag), 159 
defining style for tooltip, 205-206 
described, 18 
DHTML tags, 201 
HTML, 202-203 

HTML map, designating active areas, 
204-205 

JavaScript functions to display and hide, 
206-207 

mouse pointer, custom functions 
responding to, 207-208 

simple, creating, 209-211 

third-party scripts, 211 
_top attribute, 153 
top window position, controlling, 148 
top-level window, frame hierarchy, 153 
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trading images on rollover 
calling swap( ) function, 176-177 

S)^^t^I||iajBf\^ction, 176 

swap( ) function, 175 
transaction state, saving. See cookie 
traverse items, 44-45 
trial-and-error debugging approach, 283 
true/false value 
described, 99 
DOM, 306 

Not a Number, judging entry 
(i sNAN ( )), 222 
try block, 250-252, 284-285 
typographical errors, common, 262 



unary operator precedence, 51 
underscores, validating, 219 
Unicode characters, 330-334 
unloading document, 242, 243 
update expression, 44-45 
uppercase letters, 230, 331-332 
URL (Uniform Resource Locator) 

accuracy of listed, 3 

currently loaded (1 ocation), 314 

link opened in frame, viewing, 143 

visited (hi story), 312 
Usenet newsgroups, 258-259, 282-283 
user 

cookies, view from perspective of, 127-131 
courtesy toward, 230 
feedback, providing, 17 
identifying, 126 

preferences, detecting, 122-123 
repeat, content based on, 134-142 
user input, capturing 
blur-related event handlers, 220 
calling validation script, 221 
data-gathering script, 68-71 
HTML forms, 215-216 
input-validation script, 216-221 
numbers, identifying, 222 
regular expressions, data validation 
with, 216 



user-initiated event 
bug tied to, 282 
described, 239-240 
form, 245-246 
keyboard, 247 
mouse, 244 

Navigator and Internet Explorer 

support, 243 
predefined, DOM, 309-310 
window, 243-244, 247 
user-initiated event handler 
button pressing (onClick), 11 
described, 75, 240 
DOM, 81-82 
listed, 240-242 

pop-up advertisement, 243-244 
sliding menus, 190 



V 



validation 
data levels, 222 
design, 223 

existence, testing, 224-225 
feedback etiquette, 230 
full form, 228, 230-231 
implementing, 231-238 
numbers, checking parameters, 82-84 
numeric value, testing, 225-227 
pattern-matching, alternative to, 228-229 
patterns, testing, 227-228 
regular expressions with, 216, 219 
value 

different, checking expression for 

(switch statement), 39-41 
functions, returning from, 43 
variable, displaying, 276-279 
variable 
content, displaying (al ert( ) 

method), 270 
data types, 98-100 
defined, 36 

JavaScript language, 56-57 
values, displaying while debugging 
errors, 276-279 
Venkman JavaScript debugger, 287 
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version, browser, 106-112 
visitor. See user 




o (OpenCube), 190 



Web address 

accuracy of listed, 3 

currently loaded (1 ocati on), 314 

link opened in frame, viewing, 143 

visited (hi story), 312 
Web browser. See also frame; window 

accessing, 12 

configuration details 

(cl i entl nf ormati on), 307 

configuration (navi gator), 315-316 

crashing, 283 

incompatibility errors, common, 270-271 
JavaScript support, 13, 16 
object defined by, 75, 96 
problems, debugging, 281 
running, determining, 38 
support, DOM, 303-304 
tooltip formatting incompatibility, 201 
window or frame (wi ndow), 324 
Web page 
appearance, changing on fly, 93-96 
appearance, customizing, 17 
interactive, creating, 10 
referrer page, loading, 121 
tags, 14 

Web page layout, controlling display. 

See CSS 
Web server 

accessing, 12 

processing on, 17 



Web site 

appearance, customizing, 18 

navigation, 18 
Web Weaver (McWeb Software), 339 
WebDeveloper Web site, 186 
Webmonkey online resource, 256 
WebReference online resource, 258 
width, image, 77 
window 

described, 143-144 

event handler, 240 

events, 243-244, 247 

multiple, creating, 147-148 

opening and closing new, 144-147 

positioning, 148 

resizing or moving, 242 

stopping load, 80 

unloading, 242 
Windows XT (Microsoft), 2 
word processors, 25 
words, reserved, 295-296 

• X • 

x, y coordinates, finding, 205 
Xtreeme SiteXpert 7 site map tool, 200 

•y • 

Young, Margaret Levine (Internet For 
Dummies), 258 
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Zorn, Walter (DHTML Tooltips creator), 211 
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